How do I put hover in an image? [closed]

Question

How do I put hover in an image? [closed]

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

How do I put hover on an image. And when past the mouse appears the hover with text inside.

css3

asked by anonymous 01.02.2016 / 14:44

2 answers

1

The Parent element would be the div that contains the image.

This div must be position: relative .

Within it I put a span with a text. This span must be position: absolute which will be under changes relative to the parent element.

Then just put it in the center with CSS properties:

.hover-image{
  position: relative;
  width: 350px;
}

NOTE: The bottom is not above why I had an effect for span to be in the middle. See the functionality below:

.hover-image {
  position: absolute;
  left: 0;
  top: 0;
  margin: auto;
}
.hover-image span {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  bottom: 200px;
  width: 100%;
  line-height: 45px;
  height: 45px;
  display: block;
  background-color: #000;
  color: #FFF;
  text-align: center;
  font-family: "Roboto";
  left: 0;
  top: 0;
  margin: auto;
  transition: all 0.4s ease;
}
.hover-image:hover span {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}

<div class="hover-image">
  <img src="http://placehold.it/350x150"><spanclass="texto">Welcome</span>
</div>

01.02.2016 / 15:56

git commit push merge, only I have problems? PHP CURL issues "unable to get local issuer certificate" error

score 3 · Accepted Answer

It is not necessary to use exactly one image (I am talking about the img tag). You can use div with background-image . Inside this div you will put another div, with opacity:0 . When you hover over the div , you will make the houver of it, affect the div with the text (which will be the daughter), changing its value to opacity:1 .

I'll show you an example:

.imagem{
  background-image: url(http://i.stack.imgur.com/lvici.jpg);  
  height:300px;
  width:400px;
  background-size:100% auto;
}

.texto{
  padding:20px;
  font-family:Arial;
  text-align:center;
  color:white;
  opacity:0;
  transition: opacity .2s linear;
  background-color:rgba(0,0,0,.7);
}

.imagem:hover .texto{
  opacity:1;
 }

<div class="imagem">
  <div class="texto"><h2>Recém casados</h2></div>
</div>