Change rollover

For a website I created this rollover effect for all images and blog feeds. This was the code I used.

.latest_post_two_holder .latest_post_two_image img {
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition:all .3s ease
}
.latest_post_two_holder .latest_post_two_image img:hover {
-webkit-transform: scale(1.03);
-o-transform: scale(1.03);
transform:scale(1.03)
}

However, I don’t know what class names to add this too for the Basel theme. Can you help?

Hello,

There are too many elements that have image on the background or included. Your site is not workable now I cannot check. https://prnt.sc/s3rapu

Please read and follow the instruction on how to get the proper selector to assign your style: https://designtlc.com/use-chrome-inspector-edit-website-css/

Best Regards

My site shows that it’s working. Not sure why you can’t see it. Will you check again please

Hello,

Please provide the screen and page URL of the image you want to apply.

Best Regards

The page url is https://shawngray.tv
I want the image effect I posted above on all of the blog feed images.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.blog-post-loop:hover>.entry-header .post-img-wrapp>a {
  -webkit-transform: scale(1.03);
  transform:scale(1.03)
}
.blog-post-loop >.entry-header .post-img-wrapp>a {
  -webkit-transition: all .3s ease;
  transition:all .3s ease
}

Best Regards

I added that snippet. That did not work.

Hello,

Please provide the site admin access to the private area.

Best Regards

Here is my login credentials.

Hello,

I am checking Custom CSS and do not see you to put the code, insert it and we shall check.

Best Regards

I added the css you told me to add. The theme doesn’t like it but it’s there.

Hello,

Copy the code from the forum not from the mail.

Best Regards

Seriously. That is exactly what I posted. The css snippet you gave me above. If you have my admin login, can’t you change it to what it needs to be? This is crazy.

You keep asking me to do what I have already done.

Hello,

The code works: https://gyazo.com/a844134fec2bc06f90c55c98e5142730

Please show the example of how you expect it should be.

Best Regards

Oh. Ok. Maybe we were not on the same page. That code didn’t change what it originally did. Here is an example of what I was wanting it to do. https://echochurch.tv/

Scroll down to the images. The effect I sent is what I was wanting it to do. Your effect expands image inside of a div, where part of the image disappears. I don’t want that.

Hello,

Replace the code for this one:

.blog-post-loop:hover>.entry-header .post-img-wrapp>a {
  -webkit-transform: scale(1.03);
  transform:scale(1.03);
   opacity: 1;
}
.blog-post-loop >.entry-header .post-img-wrapp>a {
  -webkit-transition: all .3s ease;
  transition:all .3s ease;
}
.blog-post-loop .post-img-wrapp {
   background-color: transparent;
   overflow: visible;
}

You will get the same effect as you show on the link.

Best Regards

You are awesome. Thank you.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts