How can i achieve following using HTML5/CSS3?

Question

I want text to be hidden at top of image when i hover it should be visible.

Normally image looks like this without hover with text above it.

But instead i wont text to be shown on top of image when it hover like following

So basically text shown here and div shown here in image above should be hidden initially and when hover is done show those elements.

Something similar to this

code i tried doesnt work

html:

<div class="imgcontainer"> 
    <span class="hideme">Image text</span>
    <img class="img-responsive" id="thumbnail" src="source of image">
</div>

css:

.scaleout {
    transform: scale(1, 0.80);
    -ms-transform: scale(1, 0.80);
    -webkit-transform: scale(1, 0.80);

}

.hideme {
    color: black;
    top: inherit;
    z-index: -1;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

please help

You actually want to distort the image when hovered like in the second picture? Of do you want to the text to over it? — GolezTrol
– GolezTrol, Commented Nov 14, 2015 at 8:10

Alex · Accepted Answer · 2015-11-14 08:35:04Z

2

I hope this can help you. Jsfiddle

.hideme 
{
    display: block;
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 10;
    transition:0.3s;
}

.imgcontainer:hover .hideme
{
    top:0;    
}

.imgcontainer
{
    width: 201px;
    height: 286px;
    position: relative;
}

img
{
    position: absolute;
    bottom: 0;
    transition: 0.3s;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 286px;
    z-index: 15;
}


.imgcontainer:hover img
{
    height: 80%;
    bottom: 10%;
}

<div class="imgcontainer"> 
    <span class="hideme">Image text</span>
    <img width="100%" class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>

edited Nov 14, 2015 at 8:35

answered Nov 14, 2015 at 8:30

Alex

8,6956 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jinu Kurian · Accepted Answer · 2015-11-14 08:40:02Z

Let me help you. :)

.scaleout {
  transform: scale(1.25);
  -ms-transform: scale(1.25);
  -webkit-transform: scale(1.25);
}
.hideme {
  font-size: 14px;
  color: black;
  top: inherit;
  z-index: -1;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
#thumbnail {
  width: 220px;
  height: 150px;
  display: block;
  transform: scale(1.25);
  -ms-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  transition: all ease 500ms;
}
#thumbnail:hover {
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transition: all ease 500ms;
}

<div class="imgcontainer">
  <span class="hideme">Image text</span>
  <img class="img-responsive" id="thumbnail" src="https://www.orbitz.com/blog/wp-content/uploads/2011/09/Albuquerque_International_Balloon_Fiesta_snowpeak-e1315595588824.jpg">

 <span class="hideme">Another Image text? No problem :)</span>
</div>

Qwertiy · Accepted Answer · 2015-11-14 08:27:37Z

1

figure { display: flex; flex-direction: column;}
div { order: -1; visibility: hidden; }
img { align-self: flex-start; }
img:hover + div { visibility: visible; }

<figure>
  <img src=https://i.sstatic.net/mJHKc.png?s=256&g=1>
  <div>You see me only when the img is hovered :)</div>
</figure>

answered Nov 14, 2015 at 8:27

Qwertiy

21.9k17 gold badges69 silver badges143 bronze badges

Comments

score 1 · Accepted Answer · 2015-11-14 09:03:31Z

1

 .hideme {
   font-size: 14px;
   color: black;
   top: inherit;
   z-index: -1;
   text-align: center;
   vertical-align: middle;
   position: relative;
 }
 #thumbnail {
   width: 220px;
   height: 150px;
   display: block;
   transform: scale(1.2);
   -ms-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   transition: all ease 100ms;
 }
 #thumbnail:hover {
   transform: scale(1);
   -ms-transform: scale(1);
   -webkit-transform: scale(1);
   transition: all ease 100ms;
 }

<div class="imgcontainer">
  <span class="hideme">Image text</span>
  <img class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>

edited Nov 14, 2015 at 9:03

answered Nov 14, 2015 at 8:57

user5553592

Comments

Sheheryar · Accepted Answer · 2015-11-14 09:56:16Z

Try this CSS.It will help you. For Further CSS(HOVERS & STYLES) visit the website " http://codepen.io/ "

Regards:Sheheryar (PAK)

figure {
	width: 600px;
	height: 400px;
	margin:auto;
	padding: 0;
	background: #fff;
	overflow: hidden;
}


.hover01 figure img {
	-webkit-transform: scale(0.8);
	transform: scale(0.9);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/style.css">
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
<title>Untitled Document</title>
</head>

<body>

	<div class="hover01 column">
		<div > 
	   			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
</div>
</body>
</html>

Collectives™ on Stack Overflow

How can i achieve following using HTML5/CSS3?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related