0

Как сделать всплыв. текста на картинке при наведении через 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>

1

2 ответа 2

2

Что бы выполнить, именно, всплывание можно применить свойство transition.

Пример

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

2

*{
  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>

Вот так ?

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.