How to create this hover effect ?

by 10 replies
10
I wanted to create this image hover effect on my page. You can see the effect on this page on the images found in the botom:

Surviving the Final Bubble | Affiliates Center

Can anyone give me the code or something? Thx.
#website design #create #effect #hover
  • Sir, it is simple work, you can choose me for the jobs and give your page then i will give all details with work completed code and mention which hover you need
  • I can't see the image hover effect?
    • [1] reply
    • It's on the Donald Trump images that are near the bottom of the page.
  • Below is code you can use to do that:

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <style>
    .download{position:relative;display:inline-block}
    .download .overlay{display:none;width:100%;height:100%;backg round-color:rgba(0,0,0,.5);position:absolute;top:0;left: 0;font-size:48pt;color:#FFF;text-align:center;text-shadow:2px 2px 2px #000}
    .download .overlay i{line-height:250px}
    .download:hover .overlay{display:block}
    </style>

    <a class="download" href="IMAGE-large.jpg">
    <img class="img-responsive" src="IMAGE-small.jpg" alt="">
    <div class="overlay">
    <i class="glyphicon glyphicon-download-alt"></i>
    </div>
    </a>


    The first 3 lines are jQuery and Bootstrap includes. If you already have them included (which I'm guessing you do) you can remove it. Also, it is only needed for the download icon, so if you use a different icon or an image you don't need it.

    In the line below change the 250px to be the height of the thumbnail:
    .download .overlay i{line-height:250px}

    The code below is for the icon. It can be swapped out with whatever you want (different icon, image, text, etc):
    <i class="glyphicon glyphicon-download-alt"></i>

    Replace "IMAGE-large.jpg" with the larger image that will be downloaded when clicked.

    Replace "IMAGE-smaller.jpg" with the smaller image used for the thumbnail.

    Let me know any questions or issus.
    • [1] reply
    • One note, when copying the code for multiple images only copy starting from the HTML code. Don't include the </style> line or any of the lines above that the 2nd/3rd/etc time you use it on the same page.
  • Thank you guys. But I am using Wordpress and found an amazing plugin

    http://gudh.github.io/ihover/dist/
  • Image Hover Effects Css3
  • While looking at your website I found use of images to represent videos. Honestly, it is not clear to me which image you want to be hover. There are many types of hover effect.

    You may follow this link to know more about hover effect, so that you can decide and use codes accordingly:

    https://designshack.net/articles/css/joshuajohnson-2/

    Hope it helps
  • How to Make a Hover Effect at PowerPoint - YouTube
    watch dude
  • I do not see any image over effect
Join the discussion

Next Topics on Trending Feed