HTML :
<div class="start2"> <div class="boite5"> <div class="boite5__image"> <div class="boite5__info boite5__author">Photo by <a class="lien2" href="https://instagram.com/silvia.diaconescu" target="_blank">Silvia Diaconescu</a></div> <div class="boite5__info boite5__location">Geneva Lake Switzerland </div> </div> </div> </div>
CSS :
<style> * { box-sizing: border-box; } .start2 { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: 'Montserrat', sans-serif; font-size: 14px; background-color: #ffffff; } .boite5 { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; overflow: hidden; } .boite5__image { position: relative; display: flex; flex-direction: column; justify-content: center; width: 250px; height: 250px; border-radius: 50%; background-image: url('../../all-css/imgTest/2.jpg'); background-size: cover; transition: ease-in-out 0.3s; z-index: 2; } .boite5__image:before { content: ' '; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; margin: auto; background: inherit; background-position: bottom; filter: blur(40px) saturate(0%); transform: scaleX(0.4); transition: ease-in-out 0.4s; border-radius: 120px; transform-origin: right; opacity: 0; z-index: -1; } .boite5__image .boite5__info { position: relative; line-height: 1.8; transition: ease-in-out 0.3s; opacity: 0; } .boite5__image .boite5__location { transition-delay: 0.15s; } .boite5__image:hover { border-radius: 0; width: 450px; height: 310px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(9, 55, 53, 0.08), 0px 16px 24px rgba(9, 55, 53, 0.1), 0px 24px 32px rgba(9, 55, 53, 0.14); } .boite5__image:hover:before { width: 100%; opacity: 0.18; filter: blur(10px) saturate(100%); transform: scale(2.8) translate3d(-18%, 0px, 0px); } .boite5__image:hover .boite5__info { transform: translate3d(-60%, 0px, 0px); opacity: 1; } .lien2 { border-bottom: 1px solid transparent; color: #06C0A8; text-decoration: none; transition: ease-in 0.13s; } .lien2:hover { background-color: #06C0A8; color: #ffffff; } </style>