БЛОГ НА HUSL


Блоки с товарами, 2 фото, при наведении скрываем первое фото и показываем второе, проблема с адаптацией, как решить?

Автор вопроса: ws17

Сделал блоки с товарами, так же сделал фишку простую, при наведении на фото, первая фотка скрывается и показывается вторая. Вторая фотка прячется под первую.

О проблеме, как сделать чтобы фото резиновое было, у блока под классом imgss, где две фотки, вторая под первой прячется, присваивается размер, width: 100%; height: 270px;, я как только не пробовал и height: 100%; и height: auto; но так фото не видно. Видно фото если прописан размер блока у класса imgss, но так не адаптивно, как быть?

Фото резиновое если поставить width: 100%, но без height: 270px оно не видно будет, и выходит так, что у блока с классом imgss где фото, height фиксирован и мешает адаптации, вообщем чтоб понять смотрите пример.

Можно через грид, но я пока не использую грид, может не везде работать.

.alltov{
  margin: 40px 0 -30px -40px;
}
.tov > div{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(25% - 40px);
  flex: 0 0 calc(25% - 40px);
  margin: 0 0 30px 40px;
  display: block;
  text-align: center;
  position:relative;
}
.tov img {
  width: 100%;
}
.tov h2 {
height: 60px;
margin: 0 0 15px 0;
padding: 0 20px 0 20px;
line-height:16px;
font-weight: 600;
hyphens: manual !important;
color: #282725;
}
.tov p {
color: #282725;
position: absolute;
bottom:0;
left:0;
right:0;
}
.tov p b{
  font-size: 16px;
  font-weight: 600;
  color: #7b7f88;
}
.tov span{
font-size: 14px;
font-weight: 400;
}

.imgss {
  position: relative;
  width: 100%;
  height: 270px;
  display: block
}
.imgss img{
position: absolute;
left:0;
}
.imgss img,
.imgss img:last-child:hover {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.imgss img:last-child:hover {
  opacity: 0;
}

.wr{
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.alltov,
.tov h2{
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.tov h2{
    -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}




















/* нормализтор */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
a{outline:none; text-decoration: none;}
abbr[title]{border-bottom:1px dotted;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
sub,sup{font-size:75%;line-height:0;position:relative;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
input:focus,button:focus,select:focus,textarea:focus{outline:none;}
table{border-collapse:collapse;border-spacing:0;}
:focus::-webkit-input-placeholder {color: transparent;}
:focus::-moz-placeholder          {color: transparent;}
:focus:-moz-placeholder           {color: transparent;}
:focus:-ms-input-placeholder      {color: transparent;}
select{cursor:pointer;}

img {
vertical-align:bottom;
}

*{
  padding: 0;
  margin: 0;
}

.cl:after {
  content: "";
  display: table;
  clear: both;
}

html{height:100%;}
* html body{height:100%;}
<div class="alltov tov wr">

  <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>

  <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>

  <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>

</div>


Источник

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

Автор решения: ws17

Вообщем искал и нашел на одном сайте решение, выдернул его и переделал, без js и без грида.

.alltov{
  margin: 40px 0 -30px -40px;
}
.tov > div{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(25% - 40px);
  flex: 0 0 calc(25% - 40px);
  margin: 0 0 30px 40px;
  display: block;
  text-align: center;
  position:relative;
}
.tov img {
  width: 100%;
}
.tov h2 {
height: 60px;
margin: 0 0 15px 0;
padding: 0 20px 0 20px;
line-height:16px;
font-weight: 600;
hyphens: manual !important;
color: #282725;
}
.tov p {
color: #282725;
position: absolute;
bottom:0;
left:0;
right:0;
}
.tov p b{
  font-size: 16px;
  font-weight: 600;
  color: #7b7f88;
}
.tov span{
font-size: 14px;
font-weight: 400;
}

.imgss {
  display: block;
  position: relative;
}
.imgss img {
  display: block;
  width: 100%;
}
.imgss img:first-child {
  display: block;
  position: relative;
  z-index: 1;
}
.imgss img:last-child {
  display: block;
  position: absolute;
  z-index: 5;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.imgss:hover img:last-child {
  opacity: 1;
}



.wr{
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.alltov,
.tov h2{
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.tov h2{
    -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}




















/* нормализтор */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
a{outline:none; text-decoration: none;}
abbr[title]{border-bottom:1px dotted;}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
sub,sup{font-size:75%;line-height:0;position:relative;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
input:focus,button:focus,select:focus,textarea:focus{outline:none;}
table{border-collapse:collapse;border-spacing:0;}
:focus::-webkit-input-placeholder {color: transparent;}
:focus::-moz-placeholder          {color: transparent;}
:focus:-moz-placeholder           {color: transparent;}
:focus:-ms-input-placeholder      {color: transparent;}
select{cursor:pointer;}

img {
vertical-align:bottom;
}

*{
  padding: 0;
  margin: 0;
}

.cl:after {
  content: "";
  display: table;
  clear: both;
}

html{height:100%;}
* html body{height:100%;}
<div class="alltov tov wr">

  <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>

  <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>

  <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>
  
    <div class="blocktov">
    <a href="" title="" class="imgss">
      <img src="https://pbs.twimg.com/media/DJvKWXmUIAA8BX1.jpg" />
      <img src="https://i.pinimg.com/736x/68/64/d3/6864d31169a3fd759934c9a2d9a4c208.jpg" />
    </a>
    <h2>Название товара, товар двадва</h2>
    <p>
      <b>1500<span>,00</span></b> ₽
    </p>
  </div>

</div>

→ Ссылка
Автор решения: DiD

Что вы имеете в виду под адаптивностью?

Резиновое фото делается через CSS: { object-fit: cover; }.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  gap: 20px;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

li {
  width: calc(25vw - 30px);
  height: calc(50vh - 30px);
  border: 1px solid #000;
  padding: 10px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  display: block;
  transition: all 200ms;
}

img:nth-child(2) {
  transform: translate(0, -100%);
}

li:hover img:nth-child(2) {
  opacity: 0;
}
<ul>
  <li>
    <img src="https://images.unsplash.com/photo-1634247028962-74ee8b43a834?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
    <img src="https://images.unsplash.com/photo-1634247036010-922a3a307336?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1627883408276-bc4cca6441a8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
    <img src="https://images.unsplash.com/photo-1619158401201-8fa932695178?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1633949698015-0f8a8b261c07?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80" />
    <img src="https://images.unsplash.com/photo-1612975757677-6109869f1f09?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1613169251614-4ed9d5d478c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
    <img src="https://images.unsplash.com/photo-1629213429098-855c6bae92e8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1634247028962-74ee8b43a834?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
    <img src="https://images.unsplash.com/photo-1634247036010-922a3a307336?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1627883408276-bc4cca6441a8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
    <img src="https://images.unsplash.com/photo-1619158401201-8fa932695178?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1633949698015-0f8a8b261c07?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80" />
    <img src="https://images.unsplash.com/photo-1612975757677-6109869f1f09?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1613169251614-4ed9d5d478c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
    <img src="https://images.unsplash.com/photo-1629213429098-855c6bae92e8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80" />
  </li>
</ul>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.