code. compile. run. debug. share.
Source Code
Language
<p>
Hover over one of the picture and hold on for a while and watch the pulsate shadow around picture
</p>
<div class="banner">
<div class="list">
<div class="item">
<img src="https://picsum.photos/id/169/320/680" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/id/167/320/670" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/id/165/320/660" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/id/163/320/670" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/id/161/320/680" alt="">
</div>
</div>
</div>
<style>
html,
body {
margin: 0;
padding: 0;
}
p {
width: 80vw;
margin: 1rem auto;
}
.banner {
position: relative;
margin: 1rem auto;
width: 80vw;
height: auto;
}
.list {
display: flex;
justify-content: center;
align-items: center;
}
.item {
position: relative;
width: 220px;
height: 480px;
transition: all 250ms;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1rem;
box-shadow: 0px 0px 2px 2px var(--color);
}
.item:nth-child(1) {
--color: darkgreen;
z-index: 1;
}
.item:nth-child(2) {
--color: darkorange;
transform: translatex(-20px) scale(.98);
z-index: 2;
}
.item:nth-child(3) {
--color: darkblue;
transform: translatex(-40px) scale(.96);
z-index: 3;
}
.item:nth-child(4) {
--color: darkgreen;
transform: translatex(-60px) scale(.98);
z-index: 2;
}
.item:nth-child(5) {
--color: darkolivegreen;
transform: translatex(-80px);
z-index: 1;
}
.list:hover .item {
filter: grayscale(1) blur(10px);
}
.list:hover .item:hover {
filter: none;
z-index: 99;
width: 200%;
}
.list:hover .item:hover img {
animation: pulsate 2s infinite;
}
@keyframes pulsate {
from {
box-shadow: 0px 0px 1px 2px var(--color);
}
50% {
box-shadow: 0px 0px 16px 8px var(--color);
}
to {
box-shadow: 0px 0px 1px 2px var(--color);
}
}
</style>
Compiling Program...
Standard Input:
Interactive Console
Text
Program is not being debugged. Click "Debug" button to start program in debug mode.
| # | Function | File:Line |
|---|
| Variable | Value |
|---|
| Register | Value |
|---|
| Expression | Value |
|---|
| # | Description |
|---|