@Akirem749
@Mofe620
Submitted
This is my first attempt at tailwind. It seems bittersweet. It's easy, but I guess I kept fighting the urge to create a custom stylesheet and get things to work right away 😢. So far I'm unable to get the cyan overlay and view icon to work in the active(hover) states. Any help will be much appreciated. Thanks
@Akirem749
Posted
html- put the icon in an overlay <div>
.overlay{ width: image-width; height: image-height; position: absolute; //make the card container position:relative background-color: hsla(178, 100%, 50%, 0.4); top: 20px; //image-position left: 20px; //image-position opacity: 0; border-radius: 10px; transition: opacity .3s; display: flex; //to center the icon justify-content: center; align-items: center; }
.overlay:hover{ opacity: 1; cursor: pointer; }
Marked as helpful
