CODEWITHSUNDEEP
htmlcss
virendrao
virendrao

Reputation: 1813

How can i achieve following using HTML5/CSS3?

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.

Without hover on image

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

enter image description here

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

Upvotes: 2

Views: 90

Answers (5)

Sheheryar
Sheheryar

Reputation: 11

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>

Upvotes: 1

user5553592
user5553592

Reputation: 

 .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>

Upvotes: 1

Jinu Kurian
Jinu Kurian

Reputation: 9416

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>

Upvotes: 2

Alex
Alex

Reputation: 8695

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>

Upvotes: 2

Qwertiy
Qwertiy

Reputation: 21400

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>

Upvotes: 1

Related Questions