Tutorial
No Result
View All Result
Tutorial
No Result
View All Result
Tutorial
No Result
View All Result

Box hover effects CSS transition & shadow

Staff by Staff
July 16, 2020
in Uncategorized
0 0
0
0
SHARES
6
VIEWS
Share on FacebookShare on Twitter
.badge
	.text 'Hallo!
@import url(https://fonts.googleapis.com/css?family=Raleway:300);
$primary-color: rebeccapurple;
$easing: all 0.5s cubic-bezier(.55,0,.1,1);
$base-size: 20rem;

html {
  height: 100%;

  @media (max-width: ($base-size * 1.6)) {
    font-size: 12px;
  }
}

body {
  background: linear-gradient(#333,#111);
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge {
  display: block;
  position: relative;
  width: $base-size;
  height: $base-size;
  cursor: pointer;
  background: url(https://source.unsplash.com/random/1000x1000) no-repeat 100% 50%;
  background-size: 120%;
  border-radius: 50%;
  transition: $easing;
  box-shadow: 0px .5rem 1rem rgba(0,0,0,.75);

  &:hover {
    box-shadow: 0px .5rem 2rem rgba(0,0,0,.75);
    background-position: 0% 50%;

    .text {
      transform: rotate(-45deg) translate(0px) rotate(-315deg);
      background: rgba($primary-color,.5);
      width: $base-size;
      letter-spacing: 1rem;
      line-height: $base-size;
      height: $base-size;
      margin-top: -($base-size / 2);
      margin-left: -($base-size / 2);
      transition:
        $easing,
        letter-spacing 1.5s ease-out;
    }
  }

  .text {
    display: block;
    position: absolute;
    width: ($base-size / 2);
    height: ($base-size / 2);
    line-height: ($base-size / 2);
    left: 50%;
    top: 50%;
    margin-top: -($base-size / 4);
    margin-left: -($base-size / 4);
    font-size: 2rem;
		font-family: Raleway, sans-serif;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    background: $primary-color;
    transform: rotate(-180deg) translate(-($base-size / 2)) rotate(180deg);
    box-shadow: 0px .5rem 1rem rgba(0,0,0,.5);
    transition: $easing;
  }
}

2)

Previous Post

Sidebar menu & navigation / navbar CSS / Bootstrap

Next Post

CSS ripple effect Animation / On Button / Hover

Staff

Staff

Next Post

CSS ripple effect Animation / On Button / Hover

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archives

  • December 2020
  • September 2020
  • August 2020
  • July 2020
  • January 2020

Categories

  • Coding
  • CSS
  • Design
  • HTML
  • News
  • Technology
  • Uncategorized

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
  • Activity
  • Become a Vendor
  • Cart
  • Cart
  • Checkout
  • Checkout
  • Compare
  • Contact
  • Dashboard
  • Home
  • Home Layout 1
  • Home Layout 2
  • Home Layout 3
  • Members
  • My account
  • My account
  • My Orders
  • Sample Page
  • Shop
  • Shop
  • Shopping Cart
  • Term & Conditions
  • Wishlist
  • Your Recently Viewed

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Activity
  • Become a Vendor
  • Cart
  • Cart
  • Checkout
  • Checkout
  • Compare
  • Contact
  • Dashboard
  • Home
  • Home Layout 1
  • Home Layout 2
  • Home Layout 3
  • Members
  • My account
  • My account
  • My Orders
  • Sample Page
  • Shop
  • Shop
  • Shopping Cart
  • Term & Conditions
  • Wishlist
  • Your Recently Viewed

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

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

Log In