admin, Author at csshint - A designer hub

Hamburger menu sidebar

admin — Sun, 30 Jul 2023 18:06:24 +0000

How to create Hamburger menu sidebar using HTML CSS And JS. Designed by Profesor08 a codepen user.

See the Pen
Hamburger menu sidebar by Profesor08 (@Profesor08)
on CodePen.

HTML


  

  
    Home
    About US
    Product
    Contact US

CSS (SCSS)

$toggleSize: 40px;
$toggleMargin: 10px;
$toggleLine: 4px;
$toggleColor: red;

.nav-container {
  position: relative;
  display: inline-block;
  max-width: $toggleSize + $toggleMargin;
  max-height: $toggleSize + $toggleMargin;
  overflow: visible;
  outline: none;
  
  //&:focus-within, &:focus {
  &.is-active {
    .nav-toggle {
      &:before, &:after {
        box-shadow: none;
      }
      
      &:before {
        transform: rotate(-45deg);
      }
      
      &:after {
        transform: rotate(45deg);
      }
    }
    
    .nav-items {
      transform: translate(0, 0);
    }
  }
  
  .nav-toggle {
    $offset: $toggleSize * 0.5;
    
    position: relative;
    width: $toggleSize;
    height: $toggleSize;
    margin: $toggleMargin;
    z-index: 2;
    
    &:hover {
      cursor: pointer;
    }
      
    &:before, &:after {
      content: "";
      position: absolute;
      top: #{$offset - $toggleLine / 2};
      left: 0;
      transform: translate(0, 0);
      width: 100%;
      height: $toggleLine;
      background: $toggleColor;
      transition: transform .3s ease, box-shadow .3s ease;
    }
    
    &:before {
      box-shadow: 0 #{$offset / 1.5} 0 0 $toggleColor;
    }
    
    &:after {
      box-shadow: 0 #{-$offset / 1.5} 0 0 $toggleColor;
    }
  }
  
  .nav-items {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 300px;
    max-width: 50vw;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    padding: 80px 20px 20px 10px;
    transition: transform .3s ease;
    transform: translate(calc(-100% - 50px), 0);
    background: #EFEFEF;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px 0;
    align-content: start;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
    
    .nav-item {
      background: darken(#EFEFEF, 5%);
      padding: 10px;
      transition: background-color .3s ease;
      
      &:hover {
        cursor: pointer;
        background: darken(#EFEFEF, 10%);
      }
    }
  }
}

JS

const nav = document.querySelector(".nav-container");

if (nav) {
  const toggle = nav.querySelector(".nav-toggle");
  
  if (toggle) {
    toggle.addEventListener("click", () => {
      if (nav.classList.contains("is-active")) {
        nav.classList.remove("is-active");
      }
      else {
        nav.classList.add("is-active");
      }
    });
    
    nav.addEventListener("blur", () => {
      nav.classList.remove("is-active");
    });
  }
}

Output

Hamburger menu sidebar

The post Hamburger menu sidebar appeared first on csshint - A designer hub.

Bootstrap 5 – Responsive Login Form

admin — Sun, 30 Jul 2023 17:56:52 +0000

How to create Responsive Login Form using Bootstrap 5. Designed by Meb Zone a codepen user.

See the Pen
Bootstrap 5 – Responsive Login Form by Web Zone (@skcals)
on CodePen.

HTML




  
  
  Bootstrap 5 - Login Form
  



  
  
    
      
        
          
            Login
          
          
            
              
                Username/Email
                
              
              
                Password
                
              
              
                
                Remember Me

CSS

:root{
  --main-bg:#e91e63;
}

.main-bg {
  background: var(--main-bg) !important;
}

input:focus, button:focus {
  border: 1px solid var(--main-bg) !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: var(--main-bg) !important;
  border-color: var(--main-bg) !important;
}

.card, .btn, input{
  border-radius:0 !important;
}

Output

Bootstrap 5 – Responsive Login Form

The post Bootstrap 5 – Responsive Login Form appeared first on csshint - A designer hub.

CSS background image

admin — Sun, 30 Jul 2023 16:56:01 +0000

CSS background image are a powerful feature that allows you to set images as backgrounds for HTML elements on a webpage. They are a great way to enhance the visual appeal of a website, add branding elements, or create engaging designs. Background images in CSS are applied to an element’s background, behind its content, and can be used for various HTML elements, such as divs, sections, headers, and more.

Usage of CSS background images:

Setting Background Images: To set a background image using CSS, you need to use the background-image property. It can be applied inline within the HTML element using the style attribute or in an external CSS file. The property value should be the URL of the image you want to use.

Example:

div {
  background-image: url('example.jpg');
}

Background Image Position:

You can control the position of the background image using the background-position property. It allows you to place the image horizontally and vertically within the element’s background.

Example:

div {
  background-image: url('example.jpg');
  background-position: center;
}

Background Image Repeat:

By default, background images repeat both vertically and horizontally to cover the entire element. However, you can control this behavior using the background-repeat property.

Example:

div {
  background-image: url('example.jpg');
  background-repeat: no-repeat;
}

Background Image Size:

The background-size property lets you adjust the size of the background image, ensuring it fits perfectly within the element.

Example:

div {
  background-image: url('example.jpg');
  background-size: cover;
}

Multiple Background Images:

CSS also allows you to use multiple background images for a single element using the background-image property with comma-separated URLs.

Example:

#example {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Background Image Attachment:

The `background-attachment` property specifies whether the background image should scroll with the content or remain fixed.

Example:

#div {
background-image: url('example.jpg');
background-attachment: fixed;
}

Remember, when using background images, it’s essential to choose appropriate file formats (such as JPEG, PNG, or SVG) and optimize their sizes for faster page loading. Additionally, ensure that the background images do not overpower the content and maintain good contrast for readability.

The post CSS background image appeared first on csshint - A designer hub.

How to Create Embossed Text Effect using CSS

admin — Mon, 17 Jul 2023 16:42:59 +0000

In this article we are going to learn How to create Embossed Text Effect using HTML and CSS. We will use the CSS text-shadow property to get the desired output. Let’s explore how to accomplish this.

HTML Code



  

    
    Embossed Text Effect

  

    
        CSSHINT

CSS Code

/* embed google font what ever you want to add */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

body{
  color: #4e4e4e;
   font-family: poppins;
   margin: 0px;
  padding: 0px;
  background: rgba(0,45,128,0.8);
  font-weight: 700;
}

.wrap h2{
  font-size: 8rem;
  text-align:center;
  line-height:1;
  text-transform:uppercase;
  text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.2), 3px -1px 0 rgba(255, 255, 255, 0.5);
    color: rgba(0,45,128,0.8);
}

Output

Embossed Text Effect using CSS

I Hope you enjoyed this post. you can use this html css code and recreate embossed text effect in your next web design project. Thanks

The post How to Create Embossed Text Effect using CSS appeared first on csshint - A designer hub.

Pure CSS button animation bigger on hover

admin — Sat, 29 Apr 2023 17:19:18 +0000

In this article we are going to learn How to create button animation bigger on hover using css. Designed by ASK Snb.

HTML


  csshint.com

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

            body {
                background-color: #eee
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                user-select: none;
                text-transform: uppercase;
                font-family: 'Poppins', sans-serif
            }

            .centered {
                position: absolute;
                top: 40%;
                left: 40%
            }

            .lgbtn {
              border-radius: 5px;
              padding: 15px 55px;
              font-size: 18px;
              text-decoration: none;
              margin: 20px;
              background-color: green;
              color: #fff;
              position: relative;
              display: inline-block;
            }
            .lgbtn:active {
              transform: translate(0px, 5px);
              -webkit-transform: translate(0px, 5px);
              box-shadow: 0px 1px 0px 0px;
            }
            .green {
              background-color: green;
              box-shadow: 3px 5px 5px #888888;
              border-radius: 2px;
              transition: all .5s ease-in-out;
            }
            .green:hover {
              background-color: #000;
              color:#fff;
              padding: 20px 60px;
              transform: scale(1.1);
            }

            a{
               text-decoration: none !important;
            }

The post Pure CSS button animation bigger on hover appeared first on csshint - A designer hub.

Bootstrap 5 copy to clipboard items with tooltips

admin — Sat, 29 Apr 2023 16:23:49 +0000

In this article we are going to learn How to create copy to clipboard items with tooltips using bootstrap. Designed by bbbootstrap.

HTML


   
      
         
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  
             Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
             Duis aute irure dolor in reprehenderit in voluptate velit  
             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.  
             Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS

body{
    background: #B9B4B4
}
.card{
    border: none;
    height: 100%
}
.copy-button{
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}
.tip{
    background-color: #263646;
    padding: 0 14px;
    line-height: 27px;
    position: absolute;
    border-radius: 4px;
    z-index: 100;
    color: #fff;
    font-size: 12px;
    animation-name: tip;
    animation-duration: .6s;
    animation-fill-mode: both
}
.tip:before{
    content: "";
    background-color: #263646;
    height: 10px;
    width: 10px;
    display: block;
    position: absolute;
    transform: rotate(45deg);
    top: -4px;
    left: 17px
}
#copied_tip{
    animation-name: come_and_leave;
    animation-duration: 1s;
    animation-fill-mode: both;
    bottom: -35px;
    left:2px
}
.text-line{
    font-size: 14px
}

JAVASCRIPT

function copy(text, target) {
setTimeout(function() {
$('#copied_tip').remove();
}, 800);
$(target).append("Copied!");
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input)
return result;
}

RESOURCES

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 5 copy to clipboard items with tooltips appeared first on csshint - A designer hub.

Bootstrap 5 simple tabbed login register form

admin — Sat, 29 Apr 2023 16:11:52 +0000

How to create simple Bootstrap tabbed login register form . Designed by bbbootstrap.

HTML

CSS

body{
     background-color: #000;
}
 .card{
     width: 400px;
     border:none;
}
 .btr{
     border-top-right-radius: 5px !important;
}
 .btl{
     border-top-left-radius: 5px !important;
}
 .btn-dark {
     color: #fff;
     background-color: #0d6efd;
     border-color: #0d6efd;
}
 .btn-dark:hover {
     color: #fff;
     background-color: #0d6efd;
     border-color: #0d6efd;
}
 .nav-pills{
     display:table !important;
     width:100%;
}
 .nav-pills .nav-link {
     border-radius: 0px;
     border-bottom: 1px solid #0d6efd40;
}
 .nav-item{
     display: table-cell;
     background: #0d6efd2e;
}
 .form{
     padding: 10px;
     height: 300px;
}
 .form input{
     margin-bottom: 12px;
     border-radius: 3px;
}
 .form input:focus{
     box-shadow: none;
}
 .form button{
     margin-top: 20px;
}

Resources

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 5 simple tabbed login register form appeared first on csshint - A designer hub.

Menu Button Expand To Navigation Menu On Click

admin — Sat, 29 Apr 2023 07:40:08 +0000

How to create Menu Button Expand To Navigation Menu On Click using html css and js. Designed by Mathieu Lavoie a codepen user.

See the Pen
Untitled by Mathieu Lavoie (@theaftermath87)
on CodePen.

HTML




  
  CodePen - A Pen by Mathieu Lavoie
  




 menu
  
    
       shows
       media
       about
       merch

CSS

@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
body {
  background: #111;
  color: #D8D8D8;
}

* li {
  list-style: none;
}
* a {
  text-decoration: none;
  color: #D8D8D8;
}

.menuContainer {
  display: block;
  position: relative;
  width: 750px;
  margin: 0 auto;
}

.menu {
  width: 150px;
  height: 150px;
  display: block;
  position: relative;
  margin: 0px auto;
  background: #D8D8D8;
  border-radius: 100%;
  border: 1px solid #D8D8D8;
  cursor: pointer;
  z-index: 10;
}
.menu ul {
  padding: 0;
  width: 100%;
  display: none;
  position: relative;
  text-align: center;
  top: 35px;
}
.menu ul li {
  display: inline-block;
  position: relative;
  font-family: Inconsolata;
  font-size: 25px;
  margin-right: 25px;
  box-sizing: border-box;
  width: 125px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 50px;
}
.menu ul li:active {
  text-transform: uppercase;
}
.menu ul li:last-child {
  margin-right: 0;
}
.menu ul li:hover {
  background: #D8D8D8;
}
.menu ul li:hover a {
  color: #000;
}

.menuTitle {
  line-height: 150px;
  width: 150px;
  color: #000;
  text-transform: uppercase;
  font-size: 40px;
  text-align: center;
  letter-spacing: 8px;
  display: block;
  position: relative;
  margin: 0 auto;
  top: 150px;
  z-index: 11;
  padding-left: 10px;
  font-family: Inconsolata;
  cursor: pointer;
  -webkit-user-select: none;
}

JAVASCRIPT

var $menu         = $('.menu');
var $wholeMenu    = $('.menu, .menuTitle');
var $menuUl       = $('.menu ul');
var $menuTitle    = $('.menuTitle');
var $menuContainer= $('.menuContainer');
var count         = 0;
var click         = true;

$wholeMenu.click(function(){

  if (click) {
    click = false;
    $menuTitle.css({'z-index': 9});
    
    var tl = new TimelineLite();
    
    tl.to($menu, 0.4, {css:{
                width: 750,
                background: "#000",
                borderRadius: 0,
                borderTop: "1px solid #D8D8D8"
    }, ease:Expo.easeInOut});
    tl.to($menuTitle, 0.25, {x:0, y:-110, color:"#fff"});
    
    setTimeout(function(){
      $menuUl.fadeIn();
    }, 250);
    
  } else {
    click = true;
    $menuTitle.css({'z-index': 11});
    $(this).css({borderRadius: "100%"})
  
    var tl = new TimelineLite();
    
    tl.to($menu, 0.25, {css:{
                width: 150,
                background: "#FFF",
                borderRadius: "100%",
                borderTop: "1px solid #D8D8D8"
    }, ease:Expo.easeInOut})
    tl.to($menuTitle, 0.25, {x:0, y:0, color:"#000"});
    
    $menuUl.hide();
  };

  
})

The post Menu Button Expand To Navigation Menu On Click appeared first on csshint - A designer hub.

Rainbow Mouse Trail

admin — Sun, 23 Apr 2023 16:46:33 +0000

How to create Rainbow Mouse Trail using html css and js. Designed by Marjo Sobrecaray a codepen user.

See the Pen
Rainbow Mouse Trail (using dom elements) by Marjo Sobrecaray (@maaarj)
on CodePen.

HTML

move your mouse

CSS (SCSS)

@import url('https://fonts.googleapis.com/css?family=Paytone+One');
@import 'compass/css3';

body,html {
     background:#060a19;
     width:100%;
     height: 100%;
     overflow:hidden;
     font-family: Paytone One;
}
@mixin keyframes($animationName) {
  @-webkit-keyframes #{"$animationName"} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }

  @-ms-keyframes #{$animationName} {
    @content;
  }

  @keyframes #{$animationName} {
    @content;
  }
}
p {
     color: #fff;
     background: #000;
     mix-blend-mode: lighten;
     font-size:30px;
     text-align: center;
     position: absolute;
     left:0;
     right: 0;
     top:0;
     bottom: 0;
     margin:auto;
     height: 100px;
     @include animation(filterHue2 2s linear infinite);
     
     &::before {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: #e23b4a; //fallback
          @include background(linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670));
          pointer-events: none;
          mix-blend-mode: multiply;
     }
}

.loader-container {
     width:100px;
     height:100px;
     position: absolute;
     @include animation(scaleUp .5s linear);
     @include transform(scale(0));
     opacity: 0;
     .loader {
          background: #ff0c0c;
          @include background(linear-gradient(50deg,#ff0c0c,#21d400));
          border-radius:10px;
          @include filter(hue-rotate(0deg));
          animation: filterHue 2.5s linear infinite;
          height:100%;
          width: 100%;
          transform:rotate(0deg);
          &::after {
               content:'';
               position:absolute;
               height: 80px;
               width:80px;
               left:10px;
               top:10px;
               border-radius: 100%;
          }
     }
}

@include keyframes(filterHue2) {
     50%{@include filter(hue-rotate(1000deg));}
     100% {@include filter(hue-rotate(2000deg)); }
}

@include keyframes(filterHue) {
     50%{@include filter(hue-rotate(1000deg));}
     100% {@include filter(hue-rotate(2000deg));
     @include transform(rotate(360deg));}
}
@include keyframes(scaleUp) {
     50%{@include transform(scale(0.5));opacity: 1}
     100% {@include transform(scale(0.25));}
}


@supports (-ms-ime-align: auto) {
  p {
    color: #21d400;
    background: transparent;
    mix-blend-mode: lighten;
    font-size: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100px;
    @include animation(filterHue2 2s linear infinite);
  }
  p::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
  }
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     p {
          color: #ff447c;
          background: transparent;
          mix-blend-mode: lighten;
          font-size: 30px;
          text-align: center;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          height: 100px;
          @include animation(filterHue2 2s linear infinite);
     }
     p::before {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: transparent;
     }
     
     .loader {
          @include background(linear-gradient(50deg,rgba(240, 0, 80, 1),#2380ff) !important); 
     }
}

JS

window.addEventListener("mousemove", function (e) {
     var to_append = document.getElementsByClassName('loader-container')[0];
     var all = document.getElementsByClassName('loader-container');

     var parent_div = document.createElement('div');
     parent_div.className = "loader-container";
     var inner_div = document.createElement('div');
     inner_div.className = "loader";
     parent_div.appendChild(inner_div)
     var d = document.body.appendChild(parent_div);

     parent_div.style.left = (e.clientX - 50)+'px';
     parent_div.style.top = (e.clientY - 50)+'px';

     if(document.getElementsByClassName('loader-container').length > 50) {
          document.body.removeChild(to_append)
     }
});

The post Rainbow Mouse Trail appeared first on csshint - A designer hub.

HTML CSS image hover effects

admin — Sat, 22 Apr 2023 10:42:26 +0000

Learn Html CSS image hover effects. Designed by Naoya a codepen user.

See the Pen
Demo: CSS image hover effects by Naoya (@nxworld)
on CodePen.

HTML

CSS Image Hover Effects

← View the article

No Effect

Hover

1. Zoom In #1

Hover

2. Zoom In #2

Hover

3. Zoom Out #1

Hover

4. Zoom Out #2

Hover

5. Slide

Hover

6. Rotate(+Zoom Out)

Hover

7. Blur

Hover

8. Gray Scale

Hover

9. Sepia

Hover

10. Blur + Gray Scale

Hover

11. Opacity #1

Hover

12. Opacity #2

Hover

13. Flashing

Hover

14. Shine

Hover

15. Circle

Hover

CSS

body {
     color: #333;
     font-family: 'Open Sans', sans-serif;
     font-weight: 300;
}
h1,
h1+p {
     margin: 30px 15px 0;
     font-weight: 300;
}
h1+p a {
     color: #333;
}
h1+p a:hover {
     text-decoration: none;
}
h2 {
     margin: 60px 15px 0;
     padding: 0;
     font-weight: 300;
}
h2 span {
     margin-left: 1em;
     color: #aaa;
     font-size: 85%;
}
.column {
     margin: 15px 15px 0;
     padding: 0;
}
.column:last-child {
     padding-bottom: 60px;
}
.column::after {
     content: '';
     clear: both;
     display: block;
}
.column div {
     position: relative;
     float: left;
     width: 300px;
     height: 200px;
     margin: 0 0 0 25px;
     padding: 0;
}
.column div:first-child {
     margin-left: 0;
}
.column div span {
     position: absolute;
     bottom: -20px;
     left: 0;
     z-index: -1;
     display: block;
     width: 300px;
     margin: 0;
     padding: 0;
     color: #444;
     font-size: 18px;
     text-decoration: none;
     text-align: center;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
     opacity: 0;
}
figure {
     width: 300px;
     height: 200px;
     margin: 0;
     padding: 0;
     background: #fff;
     overflow: hidden;
}
figure:hover+span {
     bottom: -36px;
     opacity: 1;
}



/* Zoom In #1 */
.hover01 figure img {
     -webkit-transform: scale(1);
     transform: scale(1);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover01 figure:hover img {
     -webkit-transform: scale(1.3);
     transform: scale(1.3);
}

/* Zoom In #2 */
.hover02 figure img {
     width: 300px;
     height: auto;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover02 figure:hover img {
     width: 350px;
}

/* Zoom Out #1 */
.hover03 figure img {
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover03 figure:hover img {
     -webkit-transform: scale(1);
     transform: scale(1);
}

/* Zoom Out #2 */
.hover04 figure img {
     width: 400px;
     height: auto;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover04 figure:hover img {
     width: 300px;
}

/* Slide */
.hover05 figure img {
     margin-left: 30px;
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover05 figure:hover img {
     margin-left: 0;
}

/* Rotate */
.hover06 figure img {
     -webkit-transform: rotate(15deg) scale(1.4);
     transform: rotate(15deg) scale(1.4);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover06 figure:hover img {
     -webkit-transform: rotate(0) scale(1);
     transform: rotate(0) scale(1);
}

/* Blur */
.hover07 figure img {
     -webkit-filter: blur(3px);
     filter: blur(3px);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover07 figure:hover img {
     -webkit-filter: blur(0);
     filter: blur(0);
}

/* Gray Scale */
.hover08 figure img {
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover08 figure:hover img {
     -webkit-filter: grayscale(0);
     filter: grayscale(0);
}

/* Sepia */
.hover09 figure img {
     -webkit-filter: sepia(100%);
     filter: sepia(100%);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover09 figure:hover img {
     -webkit-filter: sepia(0);
     filter: sepia(0);
}

/* Blur + Gray Scale */
.hover10 figure img {
     -webkit-filter: grayscale(0) blur(0);
     filter: grayscale(0) blur(0);
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover10 figure:hover img {
     -webkit-filter: grayscale(100%) blur(3px);
     filter: grayscale(100%) blur(3px);
}

/* Opacity #1 */
.hover11 figure img {
     opacity: 1;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover11 figure:hover img {
     opacity: .5;
}

/* Opacity #2 */
.hover12 figure {
     background: #1abc9c;
}
.hover12 figure img {
     opacity: 1;
     -webkit-transition: .3s ease-in-out;
     transition: .3s ease-in-out;
}
.hover12 figure:hover img {
     opacity: .5;
}

/* Flashing */
.hover13 figure:hover img {
     opacity: 1;
     -webkit-animation: flash 1.5s;
     animation: flash 1.5s;
}
@-webkit-keyframes flash {
     0% {
          opacity: .4;
     }
     100% {
          opacity: 1;
     }
}
@keyframes flash {
     0% {
          opacity: .4;
     }
     100% {
          opacity: 1;
     }
}

/* Shine */
.hover14 figure {
     position: relative;
}
.hover14 figure::before {
     position: absolute;
     top: 0;
     left: -75%;
     z-index: 2;
     display: block;
     content: '';
     width: 50%;
     height: 100%;
     background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
     background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
     -webkit-transform: skewX(-25deg);
     transform: skewX(-25deg);
}
.hover14 figure:hover::before {
     -webkit-animation: shine .75s;
     animation: shine .75s;
}
@-webkit-keyframes shine {
     100% {
          left: 125%;
     }
}
@keyframes shine {
     100% {
          left: 125%;
     }
}

/* Circle */
.hover15 figure {
     position: relative;
}
.hover15 figure::before {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 2;
     display: block;
     content: '';
     width: 0;
     height: 0;
     background: rgba(255,255,255,.2);
     border-radius: 100%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     opacity: 0;
}
.hover15 figure:hover::before {
     -webkit-animation: circle .75s;
     animation: circle .75s;
}
@-webkit-keyframes circle {
     0% {
          opacity: 1;
     }
     40% {
          opacity: 1;
     }
     100% {
          width: 200%;
          height: 200%;
          opacity: 0;
     }
}
@keyframes circle {
     0% {
          opacity: 1;
     }
     40% {
          opacity: 1;
     }
     100% {
          width: 200%;
          height: 200%;
          opacity: 0;
     }
}

The post HTML CSS image hover effects appeared first on csshint - A designer hub.