Home › Forums › Basel support forum › Change rollover

Change rollover

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • April 21, 2020 at 3:42 pm #188901

    Shawn Gray
    Participant

    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?

    April 22, 2020 at 6:35 am #189045

    Elise Noromit
    Member

    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

    April 25, 2020 at 2:50 pm #189931

    Shawn Gray
    Participant

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

    April 26, 2020 at 7:11 am #189998

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    April 26, 2020 at 1:14 pm #190050

    Shawn Gray
    Participant

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

    April 27, 2020 at 6:26 am #190161

    Elise Noromit
    Member

    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

    April 27, 2020 at 3:00 pm #190326

    Shawn Gray
    Participant

    I added that snippet. That did not work.

    April 28, 2020 at 12:04 pm #190566

    Elise Noromit
    Member

    Hello,

    Please provide the site admin access to the private area.

    Best Regards

    May 1, 2020 at 4:29 pm #191594

    Shawn Gray
    Participant

    Here is my login credentials.

    May 2, 2020 at 7:08 am #191681

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    May 2, 2020 at 9:21 am #191700

    Shawn Gray
    Participant

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

    May 2, 2020 at 4:53 pm #191761

    Elise Noromit
    Member

    Hello,

    Copy the code from the forum not from the mail.

    Best Regards

    May 2, 2020 at 4:59 pm #191763

    Shawn Gray
    Participant

    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.

    May 3, 2020 at 11:57 am #191939

    Elise Noromit
    Member

    Hello,

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

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

    Best Regards

    May 3, 2020 at 1:53 pm #191955

    Shawn Gray
    Participant

    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.

    May 4, 2020 at 2:45 pm #192236

    Elise Noromit
    Member

    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

    May 4, 2020 at 2:47 pm #192239

    Shawn Gray
    Participant

    You are awesome. Thank you.

    May 4, 2020 at 2:52 pm #192243

    Elise Noromit
    Member

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

    Best Regards

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Change rollover’ is closed to new replies.