HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

CSS Tricks: Expand Card on Hover Effect (Game of Thrones theme | CODE INSIDE)

in CSS, Web Development
2 min read
415 22
0
601
SHARES
2.7k
VIEWS
Share on FacebookShare on Twitter
<div class="drogon"><img src="drogon.png" /></div>
<div class="house-lists">
<div class="house" style="background-image: url('stark.png');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-stark.png" /></div>
<div class="house-name">Stark</div>
</div>
</div>
<div class="house" style="background-image: url('targaryen.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-targaryen.png" /></div>
<div class="house-name">Targaryen</div>
</div>
</div>
<div class="house" style="background-image: url('lannister.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-lannister.png" /></div>
<div class="house-name">Lannister</div>
</div>
</div>
<div class="house" style="background-image: url('baratheon.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigili-baratheon.png" /></div>
<div class="house-name">Baratheon</div>
</div>
</div>
<div class="house" style="background-image: url('tyrell.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-tyrell.png" /></div>
<div class="house-name">Tyrell</div>
</div>
</div>
<div class="house" style="background-image: url('martell.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-martell.png" /></div>
<div class="house-name">Martell</div>
</div>
</div>
<div class="house" style="background-image: url('tully.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-tully.png" /></div>
<div class="house-name">Tully</div>
</div>
</div>
<div class="house" style="background-image: url('arryn.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-arryn.png" /></div>
<div class="house-name">Arryn</div>
</div>
</div>
<div class="house" style="background-image: url('greyjoy.jpg');">
<div class="house-inner">
<div class="sigil"><img src="sigil/sigil-greyjoy.png" /></div>
<div class="house-name">Greyjoy</div>
</div>
</div>
</div>

 

body {
background: url(https://cdnb.artstation.com/p/assets/images/images/012/370/613/large/steve-lund-castle-color2.jpg?1534439770) center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}

.drogon {
position: absolute;
top: 0;
right: 0;
}

.house-lists {
display: flex;
}

.house {
position: relative;
overflow: hidden;
width: 70px;
height: 550px;
background-size: auto 105%;
background-position: center;
border-radius: 60px;
-webkit-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);
box-shadow: 0px 0px 10px -1px rgba(255,255,255,1);

min-width: 100px;
transition: .5s ease;
margin: 15px;
}

.sigil {
min-width: 100px;
text-align: center;
position: absolute;
bottom: 10px;
}

.sigil img {
filter: brightness(0) invert(1);
max-width: 80px;
max-height: 60px;
}

.house:hover {
min-width: 600px;
background-size: auto 100%;
border-radius: 10px;
}

.house-inner {
position: relative;
height: 100%;
display: flex;
align-items: flex-end;
}

.house::before {
content: '';
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
transition: .5s ease;
}
.house:hover::before{
background: none;
}

.house-name {
color: #fff;
transform: rotate(-90deg);
font-size: 50px;
letter-spacing: 2px;
transition: .5s ease;
max-width: 100%;
margin-bottom: 120%;
}
.house:hover .house-name{
transform:rotate(0deg);
margin-bottom: 3%;
margin-left:20%
}

 

RelatedPosts

How To Create an Overlay Zoom Hover Effect in CSS [CODE]

How to Create a Direct Download Link in WordPress

How to Change Chrome DevTools Theme Color (Developer Tools)

Tags: CSS Hover Effectcss image hover effects
Share240Tweet150Share60

Related Posts

How To Create an Overlay Zoom Effect in CSS
CSS

How To Create an Overlay Zoom Hover Effect in CSS [CODE]

by business22bulbjungle
September 21, 2020
0

CSS transform Property The transform CSS property allows you to turn, scale, slant, or decipher a component. Value Description none Defines that...

Read more
How to Create a download link in wordpress

How to Create a Direct Download Link in WordPress

April 27, 2020
How to Change Chrome DevTools Theme Color (Developer Tools)

How to Change Chrome DevTools Theme Color (Developer Tools)

April 27, 2020
How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce 2020)

How to Get Your PayPal API Credentials

April 27, 2020

Trending

How to create news ticker horizontal- scrolling text
CSS

How to Create a Horizontal News Ticker with CSS Only (Scrolling Texts | CODE)

11 months ago
Frontend vs Backend
Web Development

Frontend vs Backend Comparison (Languages, Frameworks and Libraries)

12 months ago
How to hide or remove woocommerce my account either tabs
Video

How to Remove My Account Menu Links in Woocommerce

12 months ago
How to Create Paypal Sandbox Account in 2020
Ecommerce

How to Create Paypal Sandbox Test Account in 2020

1 year ago
How to Create a CSS Equal Height Columns Create Div Columns with the Same Height-min
CSS

How to Create a CSS Equal Height Columns (Create Div Columns with the Same Height)

1 year ago

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Recent News

Windows Multiple Copy and Paste (Copy and Paste in One Go)

Windows Multiple Copy and Paste (Copy and Paste in One Go)

December 19, 2020
Window cards expand on hover with CSS

CSS Tricks: Expand Card on Hover Effect (Game of Thrones theme | CODE INSIDE)

September 21, 2020

Categories

  • CSS
  • Ecommerce
  • Graphic Design
  • Javascript
  • PC Tips
  • Photoshop
  • Responsive design
  • Video
  • Web Development
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2020 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2020 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.