0

Galera o problema é que quando passo o mouse a primeira imagem não sobrepõem a segunda, mas a primeira está sobrepondo a primeira. E a imagem sobrepõem alguns textos e outros não.

<!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 Resposta 1

2

A questão está bem confusa. Executando o seu código foi possível perceber o que está dizendo, mas melhore o texto.

O atributo CSS que define o que aparece na frente quando dois elementos possuem uma área de intersecção é o z-index. Quanto maior o valor, maior prioridade o elemento tem para ser exibido. Altere o z-index no hover para um valor maior e o elemento em 'zoom' irá aparecer na frente dos outros.

 .zoom:hover img{
        transform: scale(1.5);
        z-index: 100;
 }
1
  • Cara muito obrigado, desculpa pela questão confusa hehe.
    – Bruno jun
    18/06/2020 às 20:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .