Как изменить текст в div при наведении

Question

Например, есть div, в котором есть название и картинка, нужно при наведении изменить текст и убрать картинку вообще. Еще раз, но по другому обьясню, например есть div в котором сначала написано "Яблоко" и есть картинка яблока.

По нажатию или наведению на div стало так "Сорт, цена, еще какая-то инфа".

То есть, то что было до этого убрать, а когда убираем мышку с div'а, опять был текст "яблоко" и картинка.

Вот начало кода: https://jsfiddle.net/LolKekChebyrek/s8m4r162/20/#&togetherjs=00tten35jh

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    outline: none;
}
.m2{
    width: 350px;
    height: 330px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 5px #fff;
    margin: 30px 60px 10px 60px;
}

.m2:hover{
    width: 350px;
    height: 330px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 5px #000;
    margin: 30px 60px 10px 60px;
}

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>название</title>
    <style id="wrap1">
      body {
        background: #222222;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="block-index">
          <div class="m2" style="float: left;">
              <p><b>Название</b></p>          
              <img src="img/img.jpg" alt="img" style="height: 400;width: 260px;">
          </div>
      </div>
    </div>
  </body>
</html>

Answer 1

Вот вам простой пример с легкой анимацией при наведении:

.block {
  display: block;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  border: 20px solid #f1f1f1;
}

.block img {
  display: block;
  position: relative;
  width: 300px;
  height: 300px;
}

.block h2 {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
}

.block__text {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 300px;
  background-color: #f1f1f1;
  opacity: 0;
  transition: all 0.7s ease-in-out;
}

.block:hover .block__text {
  opacity: 1;
}

h3,
p {
  text-align: center;
}

<div class="block"><img src="https://sochinyshka.ru/wp-content/uploads/2017/09/Pushkin.jpg">
  <h2>А.С. Пушкин</h2>
  <div class="block__text">
    <h3>ФОНТАНУ БАХЧИСАРАЙСКОГО ДВОРЦА</h3>
    <p>Фонтан любви, фонтан живой!<br>Принес я в дар тебе две розы.<br>Люблю немолчный говор твой<br>И поэтические слезы.<br><br><b><i>Александр Сергеевич Пушкин</i></b></p>
  </div>
</div>

БЛОГ НА HUSL

Как изменить текст в div при наведении

Ответы (1 шт):