HTML/CSS - 将鼠标悬停在照片上时显示链接

Question

I want to have my link displayed when I hover over the image. The way I wrote the code displays the link only if I hover over the link itself(which is contained in the image div). Any ideas how I should go on?

 .image-text-wrapper { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; padding-left: 100px; padding-right: 100px; font-size: 1.5em; }.image-text-wrapper.xx { transition: 1s; font-weight: 600; margin: 20px; }.image-text-wrapper.xx a { color: transparent;important. }:image-text-wrapper a:hover { color; lightseagreen:important; text-decoration: none; }

 <div class="portfolio-img-background" style="background-image:url()"> <div class="xx"> <a href="#"> Text </a> </div> </div>

Answer 1

This CSS class at the bottom of your code can be slightly modified to make this work.

.image-text-wrapper:hover a {
  color: lightseagreen !important;
  text-decoration: none;
}

Answer 2

This is a solution using just CSS

 #image{ width:200px; height:200px; background:black; display:flex; align-items:center; justify-content: center; } #link{ display:none; } #image:hover > #link { display:block; }

 <div id="image" class="portfolio-img-background" style="background-image:url()"> <div class="xx" id="link"> <a href="#"> Hi,, im a link </a> </div> </div>