Text over image when hovering - html

Question

I want to be able to make text appear over image upon hover without the current effects effecting the text boxes can anyone please assist me with this?
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #4d4d4d4d;
}
.pic {
border: 0px solid #55009f;
height: 200px;
width: 200px;
margin: 20px;
overflow: hidden;
}
/*MORPH*/
.morph {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover {
-webkit-transform:translate(0px,-10px);
-webkit-filter:grayscale(100%) blur(1px);
}
<link rel="Stylesheet" href="Stylesheet.css">
<div class="morph pic">
<img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
</div>

Answer 1

This is known as imagetooltip
Visit
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm
Everything including the demonstration, code and files are there.

Answer 2

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #4d4d4d4d;
}
.morph{
height: 200px;
width: 200px;
text-align:center;
margin:0
}
.pic {
border: 0px solid #55009f;
height: 100%;
width: 100%;
margin: 0px;
overflow: hidden;
}
/*MORPH*/
.pic{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.morph:hover > .pic{
-webkit-transform:translate(0px,-10px);
-webkit-filter:grayscale(100%) blur(1px);
}
.tooltip{
background:rgba(80,80,80,0.5);
color:black;
z-index:10;
display:none;
position:absolute;
top:100px;
height:200px;
width:200px;
margin-top:-100px;
}
.morph:hover > .tooltip{
display:block;
}
<link rel="Stylesheet" href="Stylesheet.css">
<div class="morph">
<div class="pic">
<img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
</div>
<div class="tooltip">Lorem ipsum sit dolor am ecit, lorem ipsum sit dolor am ecit, I'm sure I got these wrong, but who cares </div>
</div>
You could do it like this :)

Answer 3

I dont see any text that you want to show over there when hovering. But :hover is that to achieve this. So the answer is simply to provide tag element for the text you want to show and hide that, and then on hoverin, show the element. For example:
<div class="imtex">
<img src="some.jpg"/>
<p>hi my text is here</p>
</div>
So the style is:
.imtex {
display: block;
position: relative; //in case you want the child to absolute
}
.imtex img {
display: block;
position:absolute;
z-index: 2;
top: 0;
bottom:0;
left:0;
right: 0;
}
.imtex p {
display: none;
position:absolute;
z-index: 3; //after the image index
top: 0;
bottom:0;
left:0;
right: 0;
}
.imtex:hover p {
display: block;
}