У меня есть вот такой вот макет, где нужно чтобы при наведении появлялась иконка и затемнялся экран. Если с затемнением все понятно, то как добавить иконку при наведении? Желательно на чистом js, но если есть уже готовый вариант на jquery то присылайте.
1
-
Можно даже на чистом css – Вадим 23 мая '20 в 9:37
добавить комментарий
|
2 ответа
Один из вариантов на чистом CSS:
.blocks{
display: flex;
flex-wrap: wrap;
width: 280px;
}
.block{
width: 70px;
height: 70px;
background: #ccc;
background-position: center;
transition: .4s;
}
.blocks > .block:nth-child(odd){
background: #eee;
background-position: center;
}
.blocks > .block:hover{
background: url(https://svgsilh.com/svg/1915454-ffffff.svg) no-repeat center #555555;
background-size: 20px;
transition: .4s;
}
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
Вариант с помощью JS
, но он избыточен и не нужен, точно такой же эффект получится если заменить на :hover
const hovers = document.querySelectorAll('.hover-wrapper');
const enterHandle = function() {
const target = this.querySelector('.hover-target');
target.classList.add('active');
}
const leaveHandle = function() {
const target = this.querySelector('.hover-target');
target.classList.remove('active');
}
hovers.forEach(hover => {
hover.addEventListener('mouseenter', enterHandle);
hover.addEventListener('mouseleave', leaveHandle);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.tile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10%;
min-height: 33vh;
overflow: hidden;
}
.tile:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.25);
}
.tile .hover-target {
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: translateY(-100%);
z-index: 1;
transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
}
.tile .hover-target.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: visibility 0s, opacity 0.5s, transform 0.5s;
}
.tile img {
max-width: 25%;
cursor: help;
}
<div class="tiles">
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
</div>
Простой вариант с помощью библиотеки GSAP
const hovers = document.querySelectorAll('.hover-wrapper');
const enterHandle = function() {
const target = this.querySelector('.hover-target');
gsap.to(target, {
duration: 1,
yPercent: 0,
ease: "bounce.out"
});
}
const leaveHandle = function() {
const target = this.querySelector('.hover-target');
gsap.to(target, {
duration: 1,
yPercent: -100,
ease: "sine.out",
});
}
hovers.forEach(hover => {
const target = hover.querySelector('.hover-target');
gsap.set(target, { yPercent: -100 });
hover.addEventListener('mouseenter', enterHandle);
hover.addEventListener('mouseleave', leaveHandle);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.tile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10%;
min-height: 33vh;
overflow: hidden;
}
.tile:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.25);
}
.tile .hover-target {
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
}
.tile img {
max-width: 25%;
cursor: help;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<div class="tiles">
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
<div class="tile hover-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci excepturi modi, autem, numquam consequatur accusamus dicta delectus corrupti!</p>
<div class="hover-target">
<img src="https://image.flaticon.com/icons/svg/2210/2210317.svg" alt="">
</div>
</div>
</div>