Настройка изображений в сетке для изменения при наведении - PullRequest
Новая
       43

Настройка изображений в сетке для изменения при наведении

0 голосов
/ 04 июня 2019

У меня есть сетка из 4 фотографий, и мне нужно настроить их на изменение при наведении курсора.

Я могу сделать это с одним изображением, используя 'img: hover' и 'position: absolute;'однако с несколькими изображениями абсолютное позиционирование портит макет. 

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
<div class="row">
  <div class="column">
    <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV7Xfy9xsIHJKQDzyNeuADyO-dTfLioo221t2-7m8ABCWDiaJKTQ" alt="Forest" style="width:100%">
  </div>
</div>

Это код, который у меня есть, и я пытался добавить фон (url ...) в CSS безрезультатно.

Любая помощь / руководство будет высоко ценится, большое спасибо!

Ответы [ 3 ]

0 голосов
/ 04 июня 2019

Вы можете использовать оверлей, используя css.Пожалуйста, отметьте это .. Это будет работать для вас 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">111<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
  </div>
</div>

<div class="container">
  <img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">222<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
  </div>
</div>

<div class="container">
  <img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">333<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
  </div>
</div>

<div class="container">
  <img src="https://img.icons8.com/office/16/000000/download-2.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">444<img src="https://img.icons8.com/windows/32/000000/cloudflare.png" alt="Avatar" class="image"></div>
  </div>
</div>

</body>
</html>
0 голосов
/ 04 июня 2019

Решением было добавить код, предложенный Лалджи выше, чтобы стиль соответственно применялся к изображениям.

0 голосов
/ 04 июня 2019

Попробуйте с 

<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
    <img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
     <img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
     <img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Forest" style="width:100%">
     <img class="hover-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdf7iabWlo2C3SXNzPOVitkY47gwvZXSkYXRt9Xh0vdRFcbMA5" />
  </div>
</div>

CSS 

*{
  box-sizing:border-box;
}
.column {
  float: left;
  width: 50%;
  padding: 5px;
  position:relative;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.hover-img{
  display:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.column:hover img + img{
  display:block;
}

https://jsfiddle.net/lalji1051/jhrpfq8u/4/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...