I have a wordpress recently viewed products widget. I would like the name of the product to show up over the image, when you hover over it.
I have it working elsewhere, the difference is than with this widget, the li do not have a class attached. I know the line I need to fix is:
.product_list_widget ul li .attachment-shop_thumbnail:hover span.product_title {
I just don't know what it should be changed to, to show the span when the image is hovered!
For the first time I got a fiddle to work!
Any ideas?
.recent_view_prod ul.product_list_widget li {
width: 22%;
margin-right: 2%;
}
.recent_view_prod ul.product_list_widget li img {
width: 100%;
float: left;
}
.recent_view_prod ul.product_list_widget li {
display: inline-block;
}
.recent_view_prod span.product-title {
display: none;
}
.product_list_widget ul li .attachment-shop_thumbnail:hover span.product_title {
display: block!important;
z-index: 100;
position: absolute;
font-size: 1vw;
line-height: 1.5em;
text-align: left;
padding-left: .5em!important;
padding-right: .5em!important;
color: white;
background-color: rgba(160, 163, 162, 0.8);
left: 0px;
bottom: 25px;
width: 75%;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
<div class="wpb_widgetised_column wpb_content_element recent_view_prod">
<div class="wpb_wrapper">
<div id="woocommerce_recently_viewed_products-3" class="widget woocommerce widget_recently_viewed_products">
<h3 class="widget-title element-title">Recently Viewed Products</h3>
<ul class="product_list_widget">
<li>
<a href="http://uc.petekirkwood.co.uk/shop/opulent-bloom-card-holder/" title="Opulent Bloom Card Holder">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/TedBaker_CardHolderOpulentBloom_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_CardHolderOpulentBloom_2"> <span class="product-title">Opulent Bloom Card Holder</span>
</a>
<span class="amount">£19.95</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/store-ms/" title="Store-M's Nesting Food Boxes">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/StoreMs1-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="StoreMs1"> <span class="product-title">Store-M's Nesting Food Boxes</span>
</a>
<span class="amount">£11.95</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-crackers-tin/" title="Happy Jackson Crackers Tin">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/HappyJCrackersTIn-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="HappyJCrackersTIn"> <span class="product-title">Happy Jackson Crackers Tin</span>
</a>
<span class="amount">£6.99</span>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-snack-box-set/" title="Happy Jackson Snack Box Set">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/SnackBoxSetx4_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SnackBoxSetx4_2"> <span class="product-title">Happy Jackson Snack Box Set</span>
</a>
<span class="amount">£9.99</span>
</li>
</ul>
</div>
</div>
</div>
If you want to use css only solution, you could use adjacent selector:
img.attachment-shop_thumbnail.wp-post-image:hover + span {
display: block;
position:absolute;
}
This targets element immediately after your img element, and you don't need to know the class of your span for that.
Only requirement, you'll need to stick to, is that span has to be immediately after imgin your markup.
Another alternative might be sibling combinator selector:
img.attachment-shop_thumbnail.wp-post-image:hover ~ span {
display: block;
position:absolute;
}
which only require your span element to be after img but not necessary immediately.
Here is the JSFiddle with that.
You should use following selector:
ul.product_list_widget li .attachment-shop_thumbnail:hover span.product-title {
//styles as above
}
Your <ul> tag has class "product_list_widget" so following selector:
.product_list_widget ul li .attachment-shop_thumbnail:hover + span.product-title
wouldn't work, because that would require <ul> to be inside element that has class "product_list_widget".
Related
I am trying to create a link that is displayed on an image which should take me to a different view. I can only add a link below the image which doesn’t look very presentable. I am using basic html. Please can someone assist me?
<div class="card">
<img src="#Url.Content("~/Content/B01.jpg")" alt="Avatar" style="width:100%">
<div class="container">
<br>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
A link is just an <a> element wrapping the clickable part, which is probably most often text but can just as easily be an <img> element. You can create one manually and use the Url.Action helper to define the URL:
<a href="#Url.Action("Index")">
<img src="#Url.Content("~/Content/B01.jpg")" alt="Avatar" style="width:100%">
</a>
This code worked for me. You had to create a link to the next view and add the image afterwards. You can also use style tags to manipulate the links to your liking.
<li>
<a href="#Url.Action("Display name", "Controller")" title="your title" class="links">
<br />
<img alt="image alt" src="#Url.Content("~/Content/B01.jpg")"
style="width:500px;height:250px;border:0;"><br /><br /> <font size="4">Display a name</font>
</a>
</li>
You can also include a style
</ul>
<style type="text/css">
ul.links {
list-style-type: none;
}
ul.links li {
display: inline-block;
padding-left: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
ul.links li:first-child {
border-left: 0;
padding-left: 10px;
margin-left: 10px;
}
</style>
<br />
<ul class="links"></ul>
<style>
ul.links {
list-style-type: none;
}
ul.links li {
border-left: 0;
padding-right: 30px;
margin-left: 0px;
}
</style>
I wish too have text directly below my images so I tried the following but it did not work. I want the text direclty below and to the centre of the picture
<div class="our_partners">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<ul>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image1, 'full' )); ?>" alt="">
<span>High Speed Wifi</span> </li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image2, 'full' )); ?>" alt="">
<span> Latest Av Technology</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image3, 'full' )); ?>" alt="">
<span> Online Booking</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image4, 'full' )); ?>" alt="">
<span> Concierge Service</span>
</li>
<li><img src="<?php echo esc_url(wp_get_attachment_url( $image5, 'full' )); ?>" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
You can see the result here
and you can see it live here if you scroll down to services
http://ubtanz.solitudesoftware.co.uk/
Give img
.our_partners ul li a img {
padding: 29px 0;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Remove margin-right: 15px; to margin-right: 0;
.our_partners ul li a {
margin-right: 0;
}
to li
.our_partners ul li {
display: inline-block;
margin: 0px 5px;
}
and
span {
display: block;
text-align: center;
}
.our_partners ul li a {
margin: auto;
}
.our_partners ul li a img {
padding: 10px 0;
max-width: 100%;
max-height: 100%;
}
.our_partners ul li a {
width:230px;
text-align:center;
}
Throw this in your custom.css - makes it centered.
I'd recommend using the margin-right: 15px property on the list element, and not the anchor element because it makes more sense. You are separating between the list elements and not the anchors.
With that change in mind, all you need to do now is set the span element to take 100% of the available width, and center align its content.
.our_partners li {
margin-right: 15px;
}
.our_partners a li span {
text-align: center;
display: inline-block;
width: 100%;
}
and remove your current margin set from the anchor element:
.our_partners ul li a {
margin-right: 15px; // <- remove this line
}
Easy way, use <br/>:
<ul>
<li>
<img src="..." alt=""><br/>
<span>High Speed Wifi</span>
</li>
(...)
A better way, threat one of the part as a block, by default, a img and span tags are inline:
<ul>
<li>
<img src="..." alt="">
<span>High Speed Wifi</span>
</li>
(...)
Externalize the css style in a class. You could even wrap the linked image into a block span:
# foo.css:
span.span-block { display: block; }
...
# 42.html
<span class="span-block"><a ...><img .../></a></span>
...
Put the text inside the <a></a> tag, like so:
<li>
<a href="#"><img src="...s2-3.png" alt="">
<span style="display:block;">High Speed Wifi</span>
</a>
</li>
EDIT To ensure that all images are aligned, you can set the last image up as:
<li>
<a href="#"><img src="...cons-2.png" alt="">
<span style="display:block;"> </span>
</a>
</li>
Further, you can obviously set a style on the <span> element in your css file, to cut down on repetition.
I'm trying to make image two appear below image one when a mouse hovers over image one.
<ul>
<li>
<img id="img1" src="imageone.png">
<br>
<img id="img2" src="imagetwo.png">
</li>
</ul>
Help is appreciated!
So far I have this CSS which does not seem to work
#img2 {
display: none;
position: absolute;
}
#img1:hover + #img2,
#img2:hover {
display:block;
}
The + selects siblings that are immediately after. Your images are not, because they are separated with a <br>.
Use ~ instead:
#img1:hover ~ #img2
You are very close.
First, remove the <br> tag since it breaks the adjacent sibling selector.
The hover works as long as you over over the first image.
If you apply display: block to the img, then you don't need the <br> tag.
Depending on your layout, the tilde (~) selector could also work but it depends on whether you have other images in the layout (I am thinking a photo gallery).
ul {
list-style: none;
}
#img2 {
display: none;
}
#img1:hover + #img2 {
display: block;
}
<ul>
<li>
<img id="img1" src="http://placehold.it/150x50">
<img id="img2" src="http://placehold.it/150x50">
</li>
</ul>
use the tilde instead of the + sign, because you have a br inbetween
#img2 {
display: none;
position: absolute;
}
#img1:hover ~ #img2,
#img2:hover {
display:block;
}
<ul>
<li>
<img id="img1" src="imageone.png">
<br>
<img id="img2" src="imagetwo.png">
</li>
</ul>
You may be after something like this:
.parent{
position: relative;
}
.holder{
position: fixed;
width: 100px;
height:100px;
background-color: #efefef;
}
.img{
width: 100px;
height:100px;
background-color: #ffefef;
}
#img2{
display: none;
}
.holder:hover #img2{
display: block;
}
<ul>
<li class="parent">
<div class="holder">
<img class="img" id="img1" src="imageone.png">
<br>
<img class="img" id="img2" src="imagetwo.png">
</div>
</li>
</ul>
I have the following code on a wordpress site. I can't change the html, so, only using css #media queries I would like to make the list go from 4 per row on a desktop, down to 2 per row in a viewport of under 767px.
Is that possible?
.recent_view_prod ul.product_list_widget li {
width: 22%;
margin-right: 2%;
}
.recent_view_prod ul.product_list_widget li img {
width: 100%;
float: left;
}
.recent_view_prod ul.product_list_widget li {
display: inline-block;
}
.recent_view_prod span.product-title {
display: none;
}
a:hover > .attachment-shop_thumbnail + span {
display: block;
position:absolute;
}
<div class="wpb_widgetised_column wpb_content_element recent_view_prod">
<div class="wpb_wrapper">
<div id="woocommerce_recently_viewed_products-3" class="widget woocommerce widget_recently_viewed_products">
<h3 class="widget-title element-title">Recently Viewed Products</h3>
<ul class="product_list_widget">
<li>
<a href="http://uc.petekirkwood.co.uk/shop/opulent-bloom-card-holder/" title="Opulent Bloom Card Holder">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/TedBaker_CardHolderOpulentBloom_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_CardHolderOpulentBloom_2"> <span class="product-title">Opulent Bloom Card Holder</span>
</a>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/store-ms/" title="Store-M's Nesting Food Boxes">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/StoreMs1-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="StoreMs1"> <span class="product-title">Store-M's Nesting Food Boxes</span>
</a>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-crackers-tin/" title="Happy Jackson Crackers Tin">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/HappyJCrackersTIn-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="HappyJCrackersTIn"> <span class="product-title">Happy Jackson Crackers Tin</span>
</a>
</li>
<li>
<a href="http://uc.petekirkwood.co.uk/shop/happy-jackson-snack-box-set/" title="Happy Jackson Snack Box Set">
<img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/06/SnackBoxSetx4_2-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SnackBoxSetx4_2"> <span class="product-title">Happy Jackson Snack Box Set</span>
</a>
</li>
</ul>
</div>
</div>
</div>
Try using float: left in the under 767px and increase the width of <li>.
For example try this code:
.recent_view_prod ul.product_list_widget li {
float: left;
margin-right: 2%;
width: 40%;
}
It's entirely possible to do this. You could have your default code as something like this (mobile first approach) - you may need to play around with the percentage to make sure the two fit side by side:
.recent_view_prod ul.product_list_widget li {
display: block;
float: left;
width: 47%;
margin-right: 2%;
}
.recent_view_prod ul.product_list_widget li img {
width: 100%;
float: left;
}
.recent_view_prod ul.product_list_widget li {
display: inline-block;
}
.recent_view_prod span.product-title {
display: none;
}
a:hover > .attachment-shop_thumbnail + span {
display: block;
position:absolute;
}
and then add a media query at the end (again adjust the min-width to suit you) that brings them back to the four column layout as you currently have it, as the screen widens.
#media (min-width: 25em){
.recent_view_prod ul.product_list_widget li {
width: 22%;
}
}
Here's my HTML:
<footer>
<div class="container clearfix">
<div id="footer-content">
<p id="copyright">Copyright © 2014</p>
<div class="social">
<img src="images/facebook_icon.gif" alt="Follow us on Facebook">
<img src="images/twitter_icon.gif" alt="Follow us on Twitter">
</div><!--end of social-->
</div><!--end of footer-content-->
</div><!--end of container & cleafix-->
</footer>
Here's my CSS:
footer {
background: #d37a7a;
color: #fff;
margin-top: 95px;
height: 98px;
overflow: hidden;
}
#copyright {
float: left;
font-size: 19px;
padding: 20px 0;
}
.social {
float: right;
padding: 20px 0;
}
I can't seem to move the facebook icon just a little bit to the left. I've tried using margin and padding to push it to the left but it either moves both the twitter and facebook icons, doesn't do anything or pushes the twitter icon underneath the facebook icon.
I've also tried putting it in its own div and then doing position: relative and then moving it but it'll push the twitter icon underneath it again.
Any suggestions on what I should do? Thanks
You should add classes to each of your social media anchors:
<a class="facebook" href="http://www.facebook.com" target="_blank"><img src="images/facebook_icon.gif" alt="Follow us on Facebook" /></a>
<a class="twitter" href="http://www.twitter.com" target="_blank"><img src="images/twitter_icon.gif" alt="Follow us on Twitter" /></a>
then you can apply the styles to just the one element:
.facebook {
margin-right: 10px;
}
You have three options to to that. The first and maybe safest way is to add classes to the anchors as mentioned already. Beside that you can also select an element by it's attribute value:
.social a[href='http://www.facebook.com']{
margin-right: 10px;
}
or select an element by it's position using the child selector:
.social a:first-child{
margin-right: 10px;
}