Animated Gifs/ coding

  • Hello everyone,

    I am looking to create something as on the site (https://tinyurl.com/22yooe). If you scroll down to the offers bit where when you hover over the box the grey dissapears to reveal the image with no transparency over it.

    At present I’ve created started it (https://declanmair.com/TEST/). As you’ll see I’ve used animated gifs that when hovered over, I’d then like to start the animation and when clicked follow through to the relevant page.

    I have the layout sussed but a bit stumped by the coding!

    Any help much appreciated!
    Declan

Viewing 4 replies - 1 through 4 (of 4 total)
  • Vamsi

    (@mannemvamsi)

    I am not sure about controlling gifs start/stop animation.

    What you can do is like this, have both image and gif in the code,
    Show only image initially and when clicked hide image and show gif with javascript.

    <img src=”image.png” class=”initial”> <!– initial image —>
    <img src=”mygif.gif” class=”uponaction”> <!– show with click or hover –>

    Try adding this to your css. Add it to the bottom of your style.css to ensure it gets read last.

    /*----- CUSTOM CSS. PUT AT BOTTOM OF STYLE SHEET -----*/

li.feature {
    position: relative;
}

li.feature:hover h3 {
    opacity: 0;
}

h3.feature-title {
    opacity: 1;
    position: absolute;
    top: 40%;
    color: #FFF;
    width: 89.5%;
    transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
}

.feature-description img {
    opacity: 0;
    transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
}

.feature-description img:hover {
    opacity: 1;
    transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
}

.feature-description {
    background-color: #777;
}

    you can change the hexidecimal color from ‘#777’ to whatever you want.

    Thread Starter declanmair

    (@declanmair)

    Wow!!! That works great! I’ve tweaked the code a bit but thank you!!!

    Nice! glad it worked. Can you mark your post resolved?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Animated Gifs/ coding’ is closed to new replies.