Titles hovering over images

[lbdesign]

For all of the images in Uplift, it seems you have to hover over an image to see the title (when it is set to hover). Is there a way to force the hover title to always be “on” and visible for image elements, and for titles hovering on portfolio thumbnails in all the various formats?

Also, is it possible to suppress the image of the arrow or the link, or the magnifying glass that’s part of the hover effect?

Thank you.

Attachments:

You must be logged in to view attached files.

[lbdesign]

PS: I believe in Cardinal, there is a toggle that lets you easily turn hovering titles on and off per item in the page builder. If I am correct, is this a feature you could add to a future version of Uplift? Thanks!

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.spb_image.gallery-item figure.animated-overlay figcaption {
  opacity: 1;
}
.spb_image.gallery-item figcaption .thumb-info h4 {
  transform: none;
}
figure.animated-overlay:not(:hover) figcaption {
  background: transparent;
}
.gallery-item figcaption .thumb-info > i {
  display: none;
}

– Kyle

[lbdesign]

Thank you! This works great for individual image elements.

How do we do the same thing for Portfolio gallery elements, as shown on my original attachment? (When the portfolio headline/title is set to hover)

thank you.

[Kyle – SUPPORT]

Try

figure.animated-overlay figcaption {
  opacity: 1;
}
figcaption .thumb-info h4 {
  transform: none;
}
figure.animated-overlay:not(:hover) figcaption {
  background: transparent;
}
figcaption .thumb-info > i {
  display: none;
}

– Kyle

[lbdesign]

Thank you. That makes sense but it isn’t having an effect. Here is the code from the portfolio carousel that I want to force the image title display on. Does this help?

<div class="spb_portfolio_showcase_widget spb_content_element has-pagination col-sm-12">
		<a class="view-all hidden" href=""><i class="sf-icon-quickview"></i></a>
		<div class="spb-asset-content">
			<div class="title-wrap container"><h3 class="spb-heading center-title"><span>Medical Specialties</span></h3></div>
			<div class="port-carousel carousel-wrap"><a href="#" class="carousel-prev"><i class="sf-icon-left-chevron"></i></a><a href="#" class="carousel-next"><i class="sf-icon-right-chevron"></i></a><div id="carousel-1" class="portfolio-showcase carousel-items staged-carousel gutters clearfix" data-columns="5" data-auto="false" data-pagination="yes"><div itemscope class="clearfix carousel-item portfolio-item gallery-item"><figure class="animated-overlay overlay-style">
<a href="http://www.rtstrm.com/cam1/?portfolio=homeopathy" class="link-to-post"></a><div class="img-wrap"><img itemprop="image" src="http://www.rtstrm.com/cam1/wp-content/uploads/2016/07/park-swings-photo-slim-500x375.jpg" width="500" height="375" alt="" /></div>
<div class="figcaption-wrap"></div><figcaption ><div class="thumb-info"><i><svg version="1.1" class="sf-hover-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
		<path fill="none" stroke="#444444" stroke-width="2" stroke-miterlimit="10" d="M2,12h20 M15,19l7-7l-7-7"/>
		</svg></i><h4 itemprop="name headline" >Homeopathy</h4></div></figcaption></figure>
</div><div itemscope class="clearfix carousel-item portfolio-item gallery-item"><figure class="animated-overlay overlay-style">
<a href="http://www.rtstrm.com/cam1/?portfolio=detox" class="link-to-post"></a><div class="img-wrap"><img itemprop="image" src="http://www.rtstrm.com/cam1/wp-content/uploads/2016/07/park-swings-photo-slim-500x375.jpg" width="500" height="375" alt="" /></div>
<div class="figcaption-wrap"></div><figcaption ><div class="thumb-info"><i><svg version="1.1" class="sf-hover-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
		<path fill="none" stroke="#444444" stroke-width="2" stroke-miterlimit="10" d="M2,12h20 M15,19l7-7l-7-7"/>
		</svg></i><h4 itemprop="name headline" >Detox</h4></div></figcaption></figure>
</div><div itemscope class="clearfix carousel-item portfolio-item gallery-item"><figure class="animated-overlay overlay-style">
<a href="http://www.rtstrm.com/cam1/?portfolio=colonic" class="link-to-post"></a><div class="img-wrap"><img itemprop="image" src="http://www.rtstrm.com/cam1/wp-content/uploads/2016/07/sun-heart-slim-500x375.jpg" width="500" height="375" alt="" /></div>
<div class="figcaption-wrap"></div><figcaption ><div class="thumb-info"><i><svg version="1.1" class="sf-hover-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
		<path fill="none" stroke="#444444" stroke-width="2" stroke-miterlimit="10" d="M2,12h20 M15,19l7-7l-7-7"/>
		</svg></i><h4 itemprop="name headline" >Colonic</h4></div></figcaption></figure>
</div><div itemscope class="clearfix carousel-item portfolio-item gallery-item"><figure class="animated-overlay overlay-style">
<a href="http://www.rtstrm.com/cam1/?portfolio=chiropractic" class="link-to-post"></a><div class="img-wrap"><img itemprop="image" src="http://www.rtstrm.com/cam1/wp-content/uploads/2016/07/park-swings-photo-slim-500x375.jpg" width="500" height="375" alt="" /></div>
<div class="figcaption-wrap"></div><figcaption ><div class="thumb-info"><i><svg version="1.1" class="sf-hover-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  

[Kyle – SUPPORT]

Please provide a link so I can check

– Kyle

[lbdesign]

This reply has been marked as private.

[Kyle – SUPPORT]

Ok added some custom css for you, please check. You might need to clear your cache

– Kyle

[lbdesign]

Thank you! That’s great.

I added back in your original CSS because I also like having the hover head on the regular images too. So with the two of them, I think I’m all set now.

[lbdesign]

For anyone who’s reading this thread for their own needs, here is the Portfolio CSS that Kyle added:

.portfolio-showcase figure.animated-overlay figcaption {
  opacity: 1;
}
.portfolio-showcase figcaption .thumb-info h4 {
  transform: none;
}
.portfolio-showcase figure.animated-overlay:not(:hover) figcaption {
  background: transparent;
}
.portfolio-showcase figcaption .thumb-info > i {
  display: none;
}

[Kyle – SUPPORT]

Ok great

[tiago]

hi,

I’ve been trying to replicate this ‘title on hover instead of the arrow icon’ in a masonry-blog (without the details wrap below) but with no luck.

figure.animated-overlay figcaption {
  opacity: 1;
}
figcaption .thumb-info h4 {
  transform: none;
}
figure.animated-overlay:not(:hover) figcaption {
  background: transparent;
}
figcaption .thumb-info > i {
  display: none;
}

The CSS above removes the arrow icon, but the title still doesn’t appear.

If there’s an easy solution, could you help?
Thanks

[Kyle – SUPPORT]

Hi

It’s not possible for blog, only portfolio

– Kyle

[tiago]

Ahhh… Pitty. Thanks anyway Kyle.

Tiago