text above image and lighter image [pending]

Navigation
-1

Good afternoon everyone, I intend to create a code in html / css that allows me to move the mouse over an image, it becomes clearer, and a text appears on it ... Which commands should I use to achieve this ?

Thank you !!

    
asked by anonymous 06.10.2018 / 19:27

2 answers

0

Good afternoon, to make the image clearer, just use the opacity attribute when the mouse hover (pass over) the image for example: 

.img:hover {
    opacity: 0.7;
 }

For text, just set CSS opacity to 0, to be invisible and when you hover the mouse over hover in> changes opacity to 1 and puts everything inside a

  • li li , for example: 

    .img1 ul li a span{
    opacity: 0;
 }

 .img1 ul li:hover span{
    opacity: 1;
 }

    Of course you lack the other properties you want and for alignment of the phrase etc, but what will do the "magic" is this. I hope I have helped.

        
    • 06.10.2018 / 19:38
    0

    To do this you need two properties, the visibility that will leave the text invisible and when you hover over it will make it visible again. The other is opacity , you can decrease the opacity of the image

    Here is an example usage: 

    .main-section{
  background-image: url(https://i.imgur.com/ODmMf1p.jpg);
  background-size: cover;
  height: 150px;
  width: 150px;
  position: fixed;
}
.main-section:hover:before{
  content: '';
  position: absolute;
  top: 0;bottom: 0;
  left: 0; right: 0;
  background: white;
  opacity: 0.6;
}
.text{
  color: #000000;
  font-size: 20px;
  visibility: hidden;
  position:absolute;
  opacity: 1;
}
.main-section:hover .text{
  visibility: visible;
}
    <section class="main-section">
  <div class="text">Texto Aqui</div>
<section>
        
    06.10.2018 / 20:27
    Error starting electron Binding a checkbox with ViewModel without using Razor (Asp.net core MVC)