Как при наведении на изображение подчеркнуть текст?

Question

Пример один:

.blog-img-main img {
  transition: 1s;
  display: block;
  width: 20rem;
}

.blog-img-main img:hover {
  transform: scale(1.02);
}

.blog-img-main {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  display: inline-block;
  overflow: hidden;
}

.blog-img-main h3 {
  color: #000;
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.blog-img-main h3:after {
  background-color: gray;
  display: block;
  content: "";
  height: 13px;
  width: 0%;
  left: 50%;
  position: absolute;
  margin-top: -13px;
  opacity: 0.7;
  -webkit-transition: width .3s ease-in-out;
  -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}

.blog-img-main h3:hover:after,
.blog-img-main h3:focus:after {
  width: 100%;
}

<div class="blog-img-main">
  <div class="row">
    <div class="col-sm">
      <div>
        <a href="">
          <img src="https://drive.google.com/uc?export=view&id=1Q-2LpMuHI74GZWFXjkPMy2CbhF-swRG2">
        </a>
      </div>
      <h3>подчеркни меня. Спасибо.</h3>
    </div>
  </div>
</div>

Пример два:

.blog-img-main {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  display: inline-block;
  overflow: hidden;
}

.blog-img-main img {
  transition: 1s;
  display: block;
  width: 10rem;
}

.blog-img-main img:hover {
  transform: scale(1.02);
}

.img {
  text-align: center;
  display: block;
  cursor: pointer;
  position: relative;
}

.img:after {
  background-color: black;
  display: block;
  content: "";
  height: 13px;
  width: 0%;
  left: 50%;
  position: absolute;
  margin-top: -13px;
  opacity: 0.3;
  z-index: 1;
  -webkit-transition: width .3s ease-in-out;
  -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}

.img:hover:after,
.img:focus:after {
  width: 30%;
}

<div class="blog-img-main">
  <div class="row">
    <div class="col-sm">
      <div>
        <a href="">
          <img src="https://drive.google.com/uc?export=view&id=1Q-2LpMuHI74GZWFXjkPMy2CbhF-swRG2">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="img">
  <div class="elementor-widget-container">
    <h3>подчеркни меня</h3>
  </div>
</div>

Answer 1

Вот так:

/* Просто стили */
.action img {
  max-width: 130px; 
  cursor: pointer; 
}
.action h3 { 
  font-family: Arial; 
  color: orange; 
  letter-spacing: 4px;
}

/* Здесь обрабатывается действие наведения */
.action:hover h3 {
  text-decoration: underline;
}

<div class="action">
  <img src="https://www.film.ru/sites/default/files/images/10(186).jpg">
  <h3>PIKA PIKA!</h3>
</div>

Мы обернули картинку и текст в div, и обрабатываем наш h3 с текстом при наведении на этот div. Текст обязательно должен находиться внутри элемента, по которому обрабатывается наведение.

UPDATED: С твоим кодом...

.blog-img-main {
    width: 100%;
    -webkit-transition: all 1s ease;;
    -moz-transition: all 1s ease;;
    -o-transition: all 1s ease;;
    transition: all 1s ease;
    display: inline-block; 
    overflow: hidden; 

}

.blog-img-main img {
   transition: 1s;
   display: block; 
   width: 10rem;
}
.blog-img-main img:hover {
   transform: scale(1.02);
}

.img {
  text-align: center;
    display: block;
    cursor: pointer;
    position: relative;
}
.img:after {
  background-color: black;
  display: block;
  content: "";
  height: 13px;
  width: 0%;
  left:50%;
  position:absolute;
  margin-top: -13px;
  opacity: 0.3;
  z-index:1;
  -webkit-transition: width .3s ease-in-out;
  -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  transform:translateX(-50%);
}
.blog-img-main:hover .img:after,
.blog-img-main:focus .img:after {
    width: 30%;
}

<div class="blog-img-main">
  <div class="row">
    <div class="col-sm">
      <div>
        <a href="">
            <img src="https://drive.google.com/uc?export=view&id=1Q-2LpMuHI74GZWFXjkPMy2CbhF-swRG2">
        </a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="img">
      <div class="elementor-widget-container">
        <h3>подчеркни меня</h3>     
      </div>
    </div>
  </div>
</div>

P.S.: Первое что хотелось бы отметить - делай отступы, иначе код невозможно читать... Второе: та причина, по которой не получилось применить мой первый ответ к твоему коду - невнимательность к моим словам Текст обязательно должен находиться внутри элемента, по которому обрабатывается наведение.. В втором ответе который я прикрепил, я поместил .img внутрь .blog-img-main, и обрабатывал :hover по .blog-img-main... Удачи

Answer 2

C Вашим первым примером все в порядке, я только убрал :

margin-top: -13px;

По наведения на ТЕКСТ:

.blog-img-main {
  display: inline-block;
  overflow: hidden;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.blog-img-main h3 {
  color: #000;
  display: block;
  position: relative;
  font-size: 22px;
  line-height: 1;
  cursor: pointer; 
  z-index: 1;
}

.blog-img-main h3::after {
  content: "";
  display: block;
  opacity: 0.7;
  position: absolute;
  top: 24px;
  left: 50%;
  width: 0;
  height: 10px;
  background-color: red;
  -webkit-transition: width .3s ease-in-out;
  -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}

.blog-img-main h3:hover::after,
.blog-img-main h3:focus::after {
  width: 100%;
}

<div class="blog-img-main">
  <div class="row">
    <div class="col-sm">
      <div>
        <a></a>
      </div>
      <h3>Подчеркни меня!</h3>
    </div>
  </div>
</div>

По наведению на ТЕКСТ или ИЗОБРАЖЕНИЕ:

.blog-img-main {
  display: inline-block;
  overflow: hidden;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.blog-img-main h3 {
  color: #000;
  display: table;
  position: relative;
  font-size: 22px;
  line-height: 1;
  cursor: pointer; 
  z-index: 1;
}

.blog-img-main h3::after {
  content: "";
  display: block;
  opacity: 0.7;
  position: absolute;
  top: 24px;
  left: 50%;
  width: 0;
  height: 10px;
  background-color: red;
  -webkit-transition: width .3s ease-in-out;
  -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}

.blog-img-main h3:hover::after,
.blog-img-main h3:focus::after {
  width: 100%;
}

.blog-img-main a:hover ~ h3::after, .blog-img-main a:hover ~ h3:focus:after {
  width: 100%
}

<div class="blog-img-main">
  <div class="row">
    <div class="col-sm">
      <a><img src="https://picsum.photos/200" /></a>
      <h3>Подчеркни меня!</h3>
    </div>
  </div>
</div>

тут мне достаточно было воспользоваться ~ селектором, что бы выбрать следующий элемент к тегу a, в котором находиться само изображение.

Т.е они не обязательно должны находились в одном блоке.

БЛОГ НА HUSL

Как при наведении на изображение подчеркнуть текст?

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