CSS

【CSS】異なるホバー効果different hover effects on div block

August 2, 2016

different-hover-effects-on-div-blockはdiv要素上の異なるホバー効果

Rotate

<!DOCTYPE html>
<html>
<head>
    
    <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
    
    <style type="text/css">
        
        body > div
        {
            
            margin:121px 149px;
            
            width:483px;
            height:298px;
            
            background:#676470;
            color:#fff;
            
            font-family:Lato;
            font-weight:900;
            font-size:3.4em;
            
            text-align:center;
            line-height:298px;
            
            transition:all 0.3s ease;
            
        }
        
        .rotate:hover
        {
            -webkit-transform: rotateZ(-30deg);
            -ms-transform: rotateZ(-30deg);
            transform: rotateZ(-30deg);
        }
        
    </style>
</head>
<body>
    
    <div class="rotate">Rotate</div>

</body>
</html>

Fade

<!DOCTYPE html>
<html>
<head>
    
    <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
    
    <style type="text/css">
        
        body > div
        {
            
            margin:121px 149px;
            
            width:483px;
            height:298px;
            
            background:#676470;
            color:#fff;
            
            font-family:Lato;
            font-weight:900;
            font-size:3.4em;
            
            text-align:center;
            line-height:298px;
            
            transition:all 0.3s;
            
        }
        
        .fade
        {
            opacity:0.5;
        }
        .fade:hover
        {
            opacity:1;
        }
        
    </style>
</head>
<body>
    
    <div class="fade">Fade in</div>
    
</body>
</html>

Demo/Download