How to display content on image hover

      11 Comments on How to display content on image hover

How to display content on image hover :CSS animation

Scanfcode.com “CODE WANTS TO BE SIMPLE” is an initiative to help the upcoming programmers with the code.

SCANFCODE

How to display content on image hover :

HTML:

<div class="animation_sc1">
 <div class="animation_sc1_img">
   <img src="sample57.jpg" alt="How to display content on image hover" id='imagesc'/>
 </div>
 <div class="animation_sc1_cnt">
 <p>
 Scanfcode.com “CODE WANTS TO BE SIMPLE” is an initiative to help the upcoming programmers with the code.
 </p>
 <div style='background-color:#000;color:#fff;height:40px;width:100%;padding:10px 10px;'><span>SCANF</span><b>CODE</b></div>
 </div>

CSS:

.animation_sc1
{
  position:relative;
  width:300px;
  height:220px;
  overflow:hidden;
  padding:0px;
  font-family: 'Raleway', Arial, sans-serif;border:solid 1px #ccc;
}
#imagesc
{
  width:100%;
  height:220px;
  position:absolute;
  z-index:1;
  top:0px;
  left:0px;
}
.animation_sc1_cnt
{
 position:absolute; 
 top:-160px;
 left:20px;
 width:260px;
 height:200px;
 background-color:#fff;
 border-radius:0px 0px 5px 5px;
 z-index:2;
 transition:ease 0.40s;
 overflow:hidden;
}
.animation_sc1_cnt p
{
 margin:0px 40px;height:160px;
}
.animation_sc1:hover .animation_sc1_cnt
{ 
   top:0px;
}
.animation_sc1:hover #imagesc
{
   -webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */
   filter:blur(2px);
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
}

11 comments on “How to display content on image hover

  1. Pingback: How to display content on image hover – Scanfcode | CSS Monitor

  2. family

    I do not know whether it’s just me or if everyone else encountering problems with your blog. It seems like some of the written text within your posts are running off the screen. Can somebody else please comment and let me know if this is happening to them too? This may be a problem with my browser because I’ve had this happen before. Appreciate it

    Reply
    1. admin Post author

      Thanks for you suggestion.I think this is a problem in your browser as no one encountered such problems.

      Reply
  3. school education

    Right here is the right blog for anyone who wants to understand this topic. You know so much its almost tough to argue with you (not that I personally would want to…HaHa). You certainly put a fresh spin on a topic that’s been written about for years. Excellent stuff, just great!

    Reply
    1. admin Post author

      Thanks for your feedback on the post how to display content on image hover .This comment mean a lot to us.

      Reply
  4. healthy

    I got this site from my pal who told me about this web page and now this time I am visiting this web page and reading very informative content at this time.

    Reply
  5. finding financial advisor

    You’re so cool! I don’t suppose I’ve read a single thing like this before. So wonderful to discover somebody with unique thoughts on this topic. Seriously.. thank you for starting this up. This site is one thing that is needed on the internet, someone with some originality!

    Reply
    1. admin Post author

      thanks for your feedback on the post How to display content on image hover this comment means a a lot to us.

      Reply
  6. sales jobs

    Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something. I think that you can do with some pics to drive the message home a bit, but other than that, this is wonderful blog. An excellent read. I will definitely be back.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *