Может кто-то знает где взять заготовку примерно как на фото, такую карточку, слева изначальный вариант а справа при наведении, чтобы фото выскакивали так сбоку, вот выскакивание фото не могу найти способ реализации, помогите пожалуйста
Всего одна 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>
Можно так решить:
.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>
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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Уже битый час ломаю голову над задачей: обратиться к картинке, лежащей на несколько уровней выше
Есть простой RecyclerView в котором выводится список публикацииПри нажатию на каждую из них я перехожу на новый активити
Задача: есть папка с каталогами и подкаталогами в которых находятся файлы с логамиНужно отфильтровать и записать в отдельный файл непустые...