Hover does not overlap some images other yes

Question

Hover does not overlap some images other yes

Asked 4 years ago

Viewed 20 times

0

The problem is that when I move the mouse the first image does not overlap the second, but the first is overlapping the first. And the image overlap some texts and others do not.

<!DOCTYPE html>
<html>
    <head>
        <title>Sidereal News</title>

        <meta charset="UTF-8">

        <style type = 'text/css'>

        h1{
            text-align: center;
            color: #E0F606;
            font-size: 70px;
        }

        h2{
            text-align: center;
            font-size: 30px;
            color: #E0F606;
            position: relative;
        }

        body{
            background-image: url('fundo.jpg');
            background-repeat: no-repeat ;
            background-attachment: fixed;
            background-size: 100%;
        }

        .subA{
            position: relative; 
            font-size: 40px;
            background-color: #ABABA7;
            width: 1200px;
            border-radius: 20px;
            top:100px;
            font-family: 'Luminari', fantasy;
            height: 700px;
        }

        .sub1{
            position: absolute;
            text-align: left;
            background-color: #85929E;
            width: 605px;
            border-radius: 20px;
        }

        .submateria1{
            position: absolute;
            font-size: 30px;
            left: 630px;
            top: 70px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            text-decoration: underline;
        }

        .texto1{
            position: absolute;
            font-size: 20px;
            font-family: Arial, Helvetica, sans-serif;
            left: 630px;
            top: 200px;
        }

        .dia1{
            position: absolute;
            font-size: 15px;
            top: 350px;
            left: 1019px;
        }

        .ler{
            position: absolute;
            font-size: 20px;
            left: 630px;
        }

        .submateria2{
            position: absolute;
            font-size: 30px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            left: 630px;
            top: 390px;
            text-decoration: underline;
        }

        .texto2{
            position: absolute;
            font-family: Arial, Helvetica, sans-serif;
            left: 630px;
            font-size: 20px;
            top: 485px;
        }

        .ler2{
            position: absolute;
            font-size: 20px;
            left: 630px;
        }

        .dia2{
            position: absolute;
            font-size: 15px;
            left: 1019px;
            top: 670px;
        }

        .subB{
            position: relative;
            top: 150px;
            font-size: 40px;
        }

        .hr {
            background-color: blue;
            height: 5px;
            width: 1200px;
        }

        .linha{
            font-family:  'Luminari', fantasy;
            color: blue;

        }
        
        .fund{
            position: absolute;
            background-color: #ABABA7;
            border-radius: 30px;
            height: 550px;
            width: 1240px;
            top:70px;
        }
        img{
            position: relative;
            border-radius: 30px;
            height: 300px;
            width: 600px;
            top: 69px;
        }
            
        .zoom{
            overflow: visible;
            display: inline;
        }
        
        .zoom img{
            transition: all 0.7s;
        }

        .zoom:hover img{
            transform: scale(1.5);
        }


        .imagem{
            position: absolute;
            bottom:308px
        }

        .submateria3{
            position: absolute;
            font-size: 30px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            text-decoration: underline;
            top: 310px;
            left: 20px;
        }

        .texto3{
            position: absolute;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            top: 390px;
            left: 20px;
        }

        .ler3{
            position: absolute;
            font-size: 20px;
            top: 470px;
            left: 20px;
            font-family: 'Luminari', fantasy;
        }

        .dia3{
            position: absolute;
            font-size: 15px;
            font-family: 'Luminari', fantasy;
            top: 530px;
            left: 400px
        }

        .imagem2{
            position: absolute;
            bottom:308px;
            left: 640px
        }

        .submateria4{
            position: absolute;
            font-size: 30px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            text-decoration: underline;
            top: 310px;
            left:650px;
        }

        .texto4{
            position: absolute;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            top: 390px;
            left: 650px            
        }

        .ler4{
            position: absolute;
            font-size: 20px;
            top: 470px;
            font-family: 'Luminari', fantasy;
            left: 650px
        }

        .dia4{
            position: absolute;
            font-size: 15px;
            font-family: 'Luminari', fantasy;
            top: 530px;
            left:1050px
        }
        </style>

    </head>

    <body>
        <h1>Sidereal News</h1>
        <h2>Um site para fãs de astronomia e engenharia aeroespacial</h2>
        
        <div class='subA'>
            <div class='sub1'>
                Notícias mais recentes
            </div>

                <div class="zoom"><img src='doug.jpg'></div>
                <div class='submateria1'>Um pequeno passo para o homem, um grande salto para a máquina.</div>
                <div class='texto1'>No dia 03/06 a empresa SpaceX mandou mais de 60 satélites para o espaço, com a ajuda da Falcon 9.</div>
                <div class='ler'><a href="materia1.html">Ler mais -></a></div>
                <div class='dia1'>Postado no dia 04/06/2020.</div>
                <div class="zoom"><img src='falcon.jpg'></div>
                <div class='submateria2'>O bom filho a casa torna.</div>
                <div class="texto2">Depois do lançamento da Crew Dragon Demo-2, o astronauta Doug Hurley, volta para a ISS.</div>
                <div class="ler2"><a href="materia2.html">Ler mais -></a></div>
                <div class="dia2">Postado no dia 03/06/2020.</div>
        </div>

        <div class='subB'>
            <div class='hr'></div>
            <div class='linha'>mais notícias</div>
            <div class='fund'>
                <div class="zoom"><div class="imagem"><img src="dragon.jpg"></div></div>
                <div class="submateria3">10 anos depois...</div>
                <div class="texto3">No dia 31/05, a NASA volta a fazer lançamentos tripulados junto<br> com a empresa SpaceX.</div>
                <div class='ler3'><a href='materia3.html'>Ler mais -></a></div>
                <div class='dia3'>Postado no dia 31/05/2020.</div>
                <div class="zoom"><div class='imagem2'><img src='calendario.jpg'></div></div>
                <div class='submateria4'>Calendário Astronômico</div>
                <div class="texto4">Saiba quais os eventos que ocorrrão no mês de Junho.</div>
                <div class="ler4"><a href='materia4.html'>Ler mais -></a></div>
                <div class="dia4">Postado no dia 31/05/2020.</div>
            </div>
        </div>
    </body>
</html>

1 answer

Browser other questions tagged html css hover

You are not signed in. Login or sign up in order to post.

by Leandro Luque • **161** points · Answer 1 · 2020-06-18T15:44:29+00:00

The question is very confusing. Running your code made it possible to understand what you are saying, but improve the text.

The CSS attribute that defines what appears in front when two elements have an intersection area is z-index. The higher the value, the higher the priority the element has to be displayed. Change the z-index in Hover to a higher value and the zoom element will appear in front of the others.

 .zoom:hover img{
        transform: scale(1.5);
        z-index: 100;
 }