P
beowulf1958• 1,170
@beowulf1958
Posted
Great job on the challenge !
As to the ::after and opacity issues: You can't place an after on an <img>, but you can wrap the image in a div and use after on the div. Then, to show the icon, you define the hover state of the parent div.
.card-img-top {
position: relative;
}
.card-img-top::after {
/* Place the ::after on top of image container */
position: absolute;
top: 0;
width: 100%;
height: 100%;
/* Place icon in center of div*/
display: grid;
place-items: center;
content: url(./nft-preview-card-component-main/images/icon-view.svg);
background-color: hsl(215, 51%, 70%);
opacity: 0;
}
/* change the pseudo-element based on hover of the parent */
.card-img-top:hover::after {
opacity: 0.5;
}
Hope this helps.
Marked as helpful
1
Prajwal H C• 210
@prajwalhc-18
Posted
@beowulf1958 Super code and thanks for helping me out , it means alot to a newbie and from your code it helped to increase and analyze the problems
0
