Появление фото справа при hover эффекте

176
31 мая 2018, 10:10

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

Answer 1

Всего одна js функция

.nut { 
  position: relative; 
  width: 250px; 
  height: 400px; 
  border: 1px solid red; 
} 
 
.prev { 
  position: absolute; 
  right: 0; 
  top: 0; 
  opacity: 0; 
} 
 
img#bigi { 
  width: 100%; 
} 
 
.nut:hover .prev { 
  opacity: 1; 
}
<div class="nut"> 
<img id='bigi' src='' style="height:100%;height:100%;background:url(https://img2.goodfon.ru/original/600x1024/5/9c/alisa-devushka-krasivaya-volosy-745.jpg);background-size:cover;"> 
<div> 
  <div class="prev"> 
<img src="https://img2.goodfon.ru/original/600x1024/5/9c/alisa-devushka-krasivaya-volosy-745.jpg" onclick="bigi.src=this.src" style="width:50px;height:100px;display:block;"> 
<img src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="bigi.src=this.src" style="width:50px;height:100px;display:block;"> 
</div> 
</div>

Answer 2

Можно так решить:

.item { 
  height: 400px; 
  width: 300px; 
  display: inline-block; 
  background-color: #eee; 
  border: 2px solid green; 
  text-align: center; 
  font-size: 20px; 
  position: relative; 
   
} 
 
.item:hover .somephoto { 
  display: block; 
} 
 
.somephoto { 
  position: absolute; 
  right: 0; 
  top: 80px; 
  display: none; 
   
} 
 
.photo { 
  width: 60px; 
  height: 60px; 
  background-color: red; 
  margin-bottom: 20px; 
}
<div class='item'>Какой-то товар 
  <div class="somephoto"> 
    <div class="photo">тут фото</div> 
    <div class="photo">тут фото</div> 
  </div> 
</div> 
<div class='item'>Какой-то товар 
  <div class="somephoto"> 
    <div class="photo">тут фото</div> 
    <div class="photo">тут фото</div> 
  </div> 
</div>

Answer 3

body { 
  font-family: sans-serif; 
} 
 
.card { 
  border: 1px solid #ccc; 
  width: 200px; 
  height: 300px; 
  display: flex; 
  flex-direction: column; 
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 
} 
.card > .image { 
  background: orange; 
  flex-grow: 1; 
  display: flex; 
  flex-direction: row-reverse; 
} 
.card > .image > .additional { 
  min-width: 50px; 
  display: flex; 
  flex-direction: column; 
  background: rgba(0, 0, 0, 0.3); 
} 
.card > .image > .additional > .image { 
  height: 40px; 
  background: orange; 
  margin: 10px; 
  margin-bottom: 0; 
} 
.card > .bottom { 
  padding: 10px; 
} 
.card > .bottom .buy { 
  text-decoration: none; 
  color: #fff; 
  background: orange; 
  padding: 10px 30px; 
  display: block; 
  text-align: center; 
  border-radius: 10em; 
}
<div class="card"> 
  <div class="image"> 
    <div class="additional"> 
      <div class="image"> 
         
      </div> 
      <div class="image"> 
         
      </div> 
    </div> 
  </div> 
  <div class="bottom"> 
    <a href="#" class="buy"> 
    Купить 
       
    </a> 
  </div> 
</div>

READ ALSO
Как обратиться к картинке, лежащей на несколько уровней выше?

Как обратиться к картинке, лежащей на несколько уровней выше?

Уже битый час ломаю голову над задачей: обратиться к картинке, лежащей на несколько уровней выше

188
При возврате в RecyclerView он пустой

При возврате в RecyclerView он пустой

Есть простой RecyclerView в котором выводится список публикацииПри нажатию на каждую из них я перехожу на новый активити

213
как отсортировать логи

как отсортировать логи

Задача: есть папка с каталогами и подкаталогами в которых находятся файлы с логамиНужно отфильтровать и записать в отдельный файл непустые...

203