<div class="container"> <div class="container2"> <a href="https://www.google.com">Explore</a> <img src="cont.jpg"> </div> </div>
.container{ border: 2px solid red; overflow: hidden; height: 16%; width: 70%; margin: auto; position: relative; } .container div{ border: 2px solid black; display: inline-block; } .container2{ margin-right: 250px ; float: right; /* flex-shrink: unset; */ width: 24vw; height: 99%; position: relative; } .container2 a{ background-color: white; border: 2px solid white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgb(0, 0, 0); padding: 12px 18px; text-decoration: none; transition: background-color .3s; } .container2 a:hover{ background-color: transparent; color: white; } .container2 img{ object-fit: cover; height: 100%; width: 100%; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)