How to make a pop up. text in the picture when you hover through the css?

.imgsw { padding: 5px; text-align: center; } .imgi { width: 15%; } 
 <div id="tophead"> <div class="imgsw"> <img src="http://paralleli.by//templates/mx_joomla122/images/logofokv/1.png" class="imgi animated ke"> <img src="http://paralleli.by//templates/mx_joomla122/images/logofokv/2.png" class="imgi animated"> <img src="http://paralleli.by//templates/mx_joomla122/images/logofokv/3.png" class="imgi animated"> <img src="http://paralleli.by//templates/mx_joomla122/images/logofokv/4.png" class="imgi animated"> <br> <img src="http://paralleli.by//templates/mx_joomla122/images/logofokv/5.png" class="imgi animated"> <img src="http://paralleli.by//templates/mx_joomla122/images/logofokv/6.png" class="imgi animated"> <img src="http://paralleli.by//templates/mx_joomla122/images/logofokv/7.png" class="imgi animated"> </div> <div class="mx-base clearfix"> </div> </div>

2 answers 2

To perform, namely, floating, you can apply the transition property.

Example

 .block { max-width: 200px; width:100%; margin: 2rem auto; position: relative; border: 1px solid #777; cursor: pointer; overflow: hidden; } .block p { padding: 0 10px; font-family: Tahoma, serif; font-size: .8rem; line-height: 1.2rem; color: #777; } .block__mask { position: absolute; top:0; left:0; bottom:0; right:0; opacity: 0; height: 100%; background: #333; transform: translateY(100%); transition: all .27s ease-in-out; } .block__mask:before { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 100%; } .block__mask p { display: inline-block; vertical-align: middle; width: 85%; font-family: Tahoma, serif; text-align: center; font-size: .8rem; line-height: 1.25rem; color: #fff; transition: all .27s .27s ease-in-out; } .block:hover .block__mask { opacity: .85; transform: translateY(0%); } .block:hover .block__mask p { transform: translateX(-10px); } 
 <div class="block"> <div class="block__inner"> <img src="http://risovach.ru/thumb/upload/200s400/2013/08/generator/mayo-lico-kogda-drug-vyyobyvaetsya-_26025784_orig_.jpeg?38b58" alt="" /> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, quas?</p> </div> <div class="block__mask"> <p> deskription Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, sunt! </p> </div> </div> 

     *{ margin:0; padding:0; } .image_block{ width:220px; background:#ccc; margin:10px; position:relative; border:3px solid #999; overflow:hidden; } .image,img{ display:block; width:220px; } .text{ position:absolute; background:rgba(255,255,255,.6); color:#005; } .image_block:hover .text{ bottom:0; padding:0 5px; text-align:center; } 
     <div class="image_block"> <div class="image"> <img src="http://media.vbs.com.ua/userfiles/17(516).jpg" /> </div> <div class="text"> <p>Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh.</p> </div> </div>

    Like this ?