28111 sujets

CSS et mise en forme, CSS3

DIV

Bonjour j'ai une image dans une div puis dans une autre div (bleu) (Pour appliquer un effet de zoom au survole du curseur avec une transition avant et après que je retire le curseur de l'image

je veut rétrécir ma div bleu.
Je l'ai fait mais ça a rétrécit mon image en même temps et ça, je ne le veut pas ..

... aider moiii Smiley cavapa 


.zoom1{
	height: 50vh;
	width: 55vw;
	padding-left: 15%;
	padding-top: 5%;
	margin-bottom: 5vh;
	background-color: blue;
}

.zoom1 .zoom2 img {
    max-width: 100%;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

.zoom1 .zoom2 * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.zoom1:hover .zoom2 img {
    -moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}






<main>
        	<div class="zoom1">
        		<div class="zoom2">
        			<img class="s" src="s.jpg" alt="code"> 
        		</div>	
        	</div>[img]upload/1602674314-81315-blemee.jpg[/img]

Modifié par freeeeezi (14 Oct 2020 - 13:22)
Mtn c'est pire, j'ai supprimé les deux div l'effet est là mais ça fait le bug de windows xp

quand je zoom il y a une trace :'(((( et en plus ça me floute un peut l'image .. upload/1602675525-81315-capturedancran2020-10-1413371.jpg
Salut Freeeezi,
J'ai déjà voulu faire ca dans un autre projet, tu as besoin d'appliquer un overflow: hidden ce qui permet d'empêcher la div de dépasser ou de s'agrandir lorsque l'image quelle contient grossit :


.zoom1{
    height: 50vh;
    width: 55vw;
    padding: 10px;
    margin-bottom: 5vh;
    background-color: blue;
    box-sizing: border-box;
    position: relative;
}

.zoom2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.zoom2 img {
    width: 100%;
    height: auto;
    transition: all 0.5s;
}

.zoom2:hover img {
    -moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}


Enfin si j'ai bien compris ce que tu veux faire !
En espérant avoir été utile

EDIT: Après avoir relu ton post je ne crois pas avoir compris haha
Modifié par julienldt (14 Oct 2020 - 14:06)
Meilleure solution
Sujet clos
Aller à