Transition doesn't start when the mouse go on the area

I'm creating a website, but I have a problem in transitions (my css and my html)

.part1			{
	background-image:url(https://zupimages.net/up/18/14/49pg.jpg);
	background-attachment:fixed;
	position:relative;
	top:185px;
	font-family:Yu Gothic UI Light;
	font-size:110%;
	width:100%;
	height:500px;
	text-align:right;
	padding-right:5%;
	padding-left:50%;
	vertical-align:center;
	box-sizing: border-box;
	border-radius:30;
	-webkit-border-radius:30;
	-moz-border-radius:30;
	-o-border-radius:30;
	-ms-border-radius:30;
	 -webkit-transition: -webkit-transform 2s ease-in-out; 
	 -moz-transition: -moz-transform 2s ease-in-out; 
	 -o-transition: -o-transform 2s ease-in-out;
	 transition: transform 2s ease-in-out;
	 -webkit-transition:font-size 0.5s ease-in-out; 
	 -moz-transition:font-size 0.5s ease-in-out; 
	 -o-transition:font-size 0.5s ease-in-out;
	 transition:font-size 0.5s ease-in-out;

}
.part1:hover		{

	font-size:130%;
	-moz-box-shadow: 4px 4px 10px #888;  
	-webkit-box-shadow: 4px 4px 10px #888;  
	box-shadow:4px 4px 6px #888;
	-moz-border-radius: 15px;
	-webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, -webkit-transform 0.5s ease-in-out;
	-webkit-transform: scale(1.05); 
	-moz-transform: scale(1.05); 
	-o-transform: scale(1.05); 
	transform: scale(1.05);
}
<div class="part1">
<p>Nous créons des sites internet pour vous, rapidement et facilement. Pour <span class="blogs">une utilisation personnelle (blogs)</span> ou <span class="official">professionnelle (site officiel de l’entreprise avec un magasin en ligne)</span>, nous vous proposons des services.</p>
</div>

Why the transition doesn't start when the mouse go on the area "part1" ? And why the radius doesn't work in Chrome, but work in Edge !

1 answer

  • answered 2018-04-14 15:54 Jérémy DEMANGE

    For the radius, you forgot to add the px unit after the border-radius. Here is the right code:

    .part1          {
        background-image:url(https://zupimages.net/up/18/14/49pg.jpg);
        background-attachment:fixed;
        position:relative;
        top:185px;
        font-family:Yu Gothic UI Light;
        font-size:110%;
        width:100%;
        height:500px;
        text-align:right;
        padding-right:5%;
        padding-left:50%;
        vertical-align:center;
        box-sizing: border-box;
        border-radius:30px;
        -webkit-border-radius:30px;
        -moz-border-radius:30px;
        -o-border-radius:30px;
        -ms-border-radius:30px;
         -webkit-transition: -webkit-transform 2s ease-in-out; 
         -moz-transition: -moz-transform 2s ease-in-out; 
         -o-transition: -o-transform 2s ease-in-out;
         transition: transform 2s ease-in-out;
         -webkit-transition:font-size 0.5s ease-in-out; 
         -moz-transition:font-size 0.5s ease-in-out; 
         -o-transition:font-size 0.5s ease-in-out;
         transition:font-size 0.5s ease-in-out;
    
    }
    .part1:hover        {
    
        font-size:130%;
        -moz-box-shadow: 4px 4px 10px #888;  
        -webkit-box-shadow: 4px 4px 10px #888;  
        box-shadow:4px 4px 6px #888;
        -moz-border-radius: 15px;
        -webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, -webkit-transform 0.5s ease-in-out;
        -webkit-transform: scale(1.05); 
        -moz-transform: scale(1.05); 
        -o-transform: scale(1.05); 
        transform: scale(1.05);
    }