CSS Hover & Not Hover
Home
Snippets
CSS Hover & Not Hover
HTML
CSS
JS
<div class="wrapper"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div>
body { margin: 0; background-color: #003630; height: 100dvh; display: flex; justify-content: center; align-items: center; gap: 15px; } .wrapper { display: flex; gap: 15px; flex-wrap: wrap; padding: 20px; align-items: center; justify-content: center; } .wrapper .card { width: 150px; height: 150px; border-radius: 7px; background: #00ffd9; cursor: pointer; transition: all 0.25s ease; } .wrapper:hover> :not(:hover) { filter: blur(5px); opacity: .5; }
// JavaScript
Ad #1
Ad #2
Scroll to Top