Docs

[Ann]

Hey again,

I’m trying to create a hover effect on my home page that is currently under construction, and I have added the following code:

a.x-img.bottom-img-1 {
background: url(http://usitunesgiftcards.com/wp-content/uploads/2016/09/giftcard.jpg) no-repeat center top;
background-size: contain;
transition: 0.25s all ease-in-out;
}

a.x-img.bottom-img-1:hover img {
opacity: 0;
transition: 0.25s all ease-in-out;
}

a.x-img[class*=”bottom-img”] img {
transition: 0.25s all ease-in-out;
}

and then added the class: bottom-img to the specific image.

But it is not working. Can you see what I’m doing wrong?

Thanks,
Ann

[Darshana]

Hi there,

Thanks for writing in! As your site is currently under construction mode, we need your login credentials to check your current page.

Thanks!

[Ann]

This reply has been marked as private.

[Joao]

Hi There,

Use this instead:

img.x-img.bottom-img  {
   background: url(http://usitunesgiftcards.com/wp-content/uploads/2016/09/giftcard.jpg) no-repeat center top;
   background-size: contain;
   transition: 0.25s all ease-in-out;
}

img.x-img.bottom-img:hover  {
   opacity: 0;
   transition: 0.25s all ease-in-out;
}

Hope it helps

Joao

[Ann]

Awesome, one step closer 🙂

That made the image disappear when hover over, it is not displaying the specified image thought. Is there anything else I should add?

[Paul R]

Hi,

I added a unique class(my-column-1, my-column-2, my-column-3 ) to each columns where your images resides.

Kindly change the css code to this.

.my-column-1 {
   background: url(http://usitunesgiftcards.com/wp-content/uploads/2016/09/giftcard.jpg) no-repeat center top;
   background-size: contain;
   transition: 0.25s all ease-in-out;
}

.my-column-2 {
   background: url(http://usitunesgiftcards.com/wp-content/uploads/2016/09/giftcard.jpg) no-repeat center top;
   background-size: contain;
   transition: 0.25s all ease-in-out;
}

.my-column-3 {
   background: url(http://usitunesgiftcards.com/wp-content/uploads/2016/09/giftcard.jpg) no-repeat center top;
   background-size: contain;
   transition: 0.25s all ease-in-out;
}

img.x-img.bottom-img:hover  {
   opacity: 0;
   transition: 0.25s all ease-in-out;
}

Hope that helps.

[Ann]

That did it!

Thanks so much!

[Ann]

One more question 🙂

If I would like to add an image row below, how would I update the code?

[Lely]

Hi There,

You’re welcome!
Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Ann]

I’m sorry for not being clear. If I add an additional row of images (see screen shot), how can I get the same hover effect (different hover image though) on those?

Dos that make sense?

[Jade]

Hi there,

You can simply duplicate the row that contains the images then edit the contents and the hover effect should be carried out since the CSS code added to it is not specific to that one section that is in your page now.

[Author]

Posts