Html And Css Social Media Card Hover Built #1

 Html And Css Social Media Card Hover Built #1
Okunuyor Html And Css Social Media Card Hover Built #1

The today over lesson is Html And Css Social Media Card Hover Built

I hope this information will be useful to you.

Socail Media Card Hover                                  HTML

<div class="container">
   <div class="card">
	    <div class="front front1">
		     <div class="content">
			      <div class="icon">
			         <i class="fa fa-instagram" aria-hidden="true"></i>
			      </div>
			   </div>   
     </div>
		 <div class="front front2">
		      <div class="content">
			           <h3>
			               <a href="https://www.instagram.com/css_codre"
				             traget="_blank">css_coder</a>
		             </h3>	
		             <p>This are the article</p>
	         </div>
        </div>
    </div>		
</div>

CSS

body{
	margin: 0; padding: 0;
	min-height: 100uh;
	background-image: url("./img/topagraph.sug")
					linear-gradinet(110deg, #f93d66, #6d47d9))
	display: flex;
	justify-content: center; align-items: center;
	
	font-family: sans-serif; background-color: #f1f1f1;
}
.container{
	width: 1000px;
	position: relative; display: flex;
	justify-content: space-between;
} .container .card{
	position: relative;
	border-radius: 10px;
}
.container .card .icon{
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background: #f00: transition: 0.7s;
	z-index: 1;
}
.container .card .icon{
	background: linear-gradinet(150deg, #405de6, #405de6, #833ab4, #c13584,
                     #e1306c, #fd1d1d, #f56040, #f77737, #facf45, #ffdc80);
	border-radius: 5px;
}

CSS

.container .card :hover .front.front2{
	transform: translateY(0);
}
.container .card .front.front2 .content p{
	margin: 0; padding: 0; text-align: center; color: #fff;
}
.container .card .front.front2 .content h3{
	margin: 0 0 10px 0; padding: 0; color: #fff;
	font-size: 24px; text-align: center;
	color: #414141;
}

.container a{
	text-decoration: none; color: #fff;
}
.container a:hover{
	border-bottom: 4px solid #c9cc2; transition: border .1s case-out;
}
.container a:active{       color: black; }

CSS

.container .card:hover .front.front1{
	background: #ff0057;
	transform: translateY(0px);
	width: 250px; height: 150px; padding-left: 50px; opacity: 0;
}
.container .card .front.front1 .content{
	opacity: 1; transition: 0.5s;
}
.container .card .front.front1 .content i{
	max-width: 100px;
}
.container .card .front.front2{
	position: relative; background: transparent;
	display: flex; justify-content: center; align-items: center; padding: 20px;
	box-sizing: border-box; box-shadow: 0 20px rgba(0,0,0,0.8);
	transform: translateY(-100px);
}

CSS

.container .card .icon .fa{
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%); font-size: 80px;
	transition: 0.7s; color: #fff;
}

i{
	position: absolute; top: left: 50%; transform: translate(-50%, -50%);
	font-size: 80px; transition: 0.7s; color: #fff;
}
.container .card .front{
	width: 300px;height: 200px; transition: 0.5;
}
.container .card .front.front1{
	position: relative; background: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	transform: translateY(160px);
}

I hope this information has been useful to you. And work harder to achieve.

I wish you good work

Yapılan Yorumlar

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.