├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HOVER EFFECT 8 | 9 | 10 | 11 | 12 |
13 | SOCIAL MEDIA HOVER EFFECT 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .head 2 | { 3 | width: 100%; 4 | height: 100%; 5 | background: #f1f9ff; 6 | 7 | display: flex; 8 | align-items: center; 9 | flex-direction: column; 10 | justify-content: center; 11 | 12 | 13 | } 14 | h7{ 15 | font-size: 40px; 16 | margin-bottom: 100px; 17 | margin-top: 100px; 18 | } 19 | .socialmedia{ 20 | display: flex; 21 | 22 | } 23 | .socialmedia a{ 24 | width: 80px; 25 | height: 80px; 26 | text-align: center; 27 | text-decoration: none; 28 | color: #000; 29 | box-shadow: 0 0 20px 10px rgba(0,0, 0,0.05); 30 | margin: 0 30px; 31 | border-radius: 50%; 32 | position: relative; 33 | overflow: hidden; 34 | transition: transform 0.5s; 35 | 36 | } 37 | .socialmedia a .fa-brands { 38 | font-size: 30px; 39 | line-height: 80px; 40 | position: relative; 41 | z-index:10; 42 | transition: color 0.5s; 43 | 44 | 45 | } 46 | .socialmedia a::after{ 47 | content :''; 48 | width: 100%; 49 | height: 100%; 50 | top: -90px; 51 | left: 0; 52 | background: linear-gradient(-45deg,#ed1c94,#ffec17); 53 | position: absolute; 54 | transition: 0.5s; 55 | } 56 | .socialmedia a :hover::after{ 57 | top: 0; 58 | } 59 | .socialmedia a :hover.fa-brands{ 60 | color: #f1f9ff; 61 | } 62 | .socialmedia a :hover{ 63 | transform:translate(-10px) ; 64 | } --------------------------------------------------------------------------------