Hover effect
-
Hi! I am working on an image gallery that present our products. Every image are linked to the page of the product. I would like to create an hover effect with text just like that : https://docs.shopify.com/manual/configuration/store-customization/page-specific/collections/add-a-hover-effect-to-product-images
I would like to know how to do that with WordPress.
Please refer to my “Products” page.
Thank you!The blog I need help with is: (visible only to logged in users)
-
Hi there,
This isn’t a WordPress issue as much as it is an advanced customization issue. You’re off to a good start; if you add in captions on that page it may be easier to help you out. Can you add in some example text next to an image so that I can inspect it and let you know what you may be able to do with CSS to handle this?
Thanks,
Philip -
-
I’m looking at your products page and you’ve said that you want to do something along the lines of a hover effect, correct? If you can explain exactly what you want to have happen with those images when you hover over them then I may be able to help.
Cheers,
Philip -
I would like that when I hover over my images, they would get a sort of opacity blurred white effect and the name of the products would appear in the center of the images.
-
In order to do this, you will need 1) custom CSS and 2) HTML that shows your product names.
I think a better way of doing this would be to insert your images as a gallery and have each gallery thumbnail link to a custom URL. This is already supported by WordPress and will not require a ton of custom code on your part.
-
In fact, I choose not to do a gallery because every image in my products page are linked to another page. Previously, I contacted the Live Chat Support and they told me that with the gallery options I wasn’t possible to set individual URL links.
-
I’m wrong, sorry about that. In that case you should change your HTML now to something more like this: https://cloudup.com/crLAzn79xik. Once you’ve done that for each product then you’ll be able to start taking advantage of custom CSS to handle the hiding and showing on hover.
-
So, if I understand well, I copy the code and I paste it in the URL address of the image or in my CSS editor?
-
No. You would switch over to your Text editor on your edit post page and make sure that your HTML looked like the example that I posted. Right now your gallery looks fine but if you want to add words into it then you will need to make sure that the form of it follows the snippet that I linked above. Once that’s done then it’ll be easier to help out.
-
I was able to do the hover effect I wanted to have by inserting a class in the HTML code in the Text Editor (.hover-effect) and I went into the CSS Editor in the Customizer and I wrote:
.hover-effect:hover{
opacity: .6;
transform: scale(1.1);
}It is working very well. You got me on track with your explications. Now, I will try to make appear the text (the product name) in the middle of every picture.
-
Ok I did what you told me to do in the text Editor and I tried to move it with the CSS editor. Here’s some pictures to help you understand what I mean!
Text Editor : https://cloudup.com/i6UiZj1Y_DJ
Result with CSS: https://cloudup.com/iza_Lzx35qh -
I may not get to this until Saturday. Hopping on a plane back to Hanoi and the flight is 30+ hours from door to door. Thanks a ton for your patience!
-
I didn’t get news about this… was it possible to add some text or it is too advanced CSS to be support by WordPress?
-
Sorry, this fell through the cracks. I just looked at your products page and I see that you have the hover effect working very nicely. I see no text on those pages. So do you want text there or not? Can you add it back in?
-
I was looking for a way to explain you what I would like to have and I think I found one. Since the fact that you are the theme author, maybe you will understand me ;) Take the example of the posts mosaic on the home page where you see the features images and when you hover them, the title of the post is showing. I would like to have the same effect but on my products’ images.
-
I finally found how to do it. This is how I did it, for the next ones would like to know:
HTML (Text editor)
<div id=”gallery2″>
<div class=”reveal”>
<div class=”hidden”>
<div class=”caption”>
<div class=”centered”>High bay lights</div>
</div>
</div>
</div>
</div>
CSS Editor
#gallery2 {
width: 783px;
margin: auto;
}/*Hover effect on products********/
.gallery_float {
float: left;
}.reveal .hidden {
display: block !important;
visibility: visible !important;
}.product:hover .reveal img {
opacity: 1;
}.reveal {
position: relative;
float: left;
margin: 5px;
}.reveal .hidden {
position: relative;
z-index: -1;
top: 0;
width: 205px;
height: 205px;
opacity: 0;
-webkit-transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .1s ease-in-out;
}.reveal:hover .hidden {
z-index: 100000;
opacity: .7;
}.reveal .caption {
position: absolute;
top: 0;
display: table;
width: 205px;
height: 205px;
background-color: white;
/* fallback for IE8 */
background-color: rgba(255,255,255,0.9);
font: 14px/1.6 Lato, sans-serif;
text-transform: uppercase;
font-weight: bold;
color: #000;
letter-spacing: 1px;
text-align: center;
text-rendering: optimizeLegibility;
}.reveal .caption a {
border: none;
}.reveal .hidden .caption .centered {
display: table-cell;
vertical-align: middle;
} -
-
I can confirm that your page looks good on this end. Thanks a ton for sharing that. Glad this was resolved.
- The topic ‘Hover effect’ is closed to new replies.
Premium Theme Support 