CSS Mouse Over Effect -Website Design

Magic Glowing Card Mouse Over Effect

Create a Beautiful Glowing Magic Card With Mouse Hover Effect

Glowing Magic Card With Mouse Hover Effect HTML

<div class="card">
Magic Card
</div>
<a href="https://website-design99.blogspot.com/" target="_blank">websitedesigm99</a>

Glowi ng Magic Card With Mouse Hover Effect CSS

@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
:root {
--card-height: 65vh;
--card-width: calc(var(--card-height) / 1.5);
}

body {
min-height: 100vh;
background: #212534;
display: flex;
align-items: center;
flex-direction: column;
padding-top: 2rem;
padding-bottom: 2rem;
box-sizing: border-box;
}

.card {
background: #191c29;
width: var(--card-width);
height: var(--card-height);
padding: 3px;
position: relative;
border-radius: 6px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
font-size: 1.5em;
color: rgb(88 199 250 / 0%);
cursor: pointer;
font-family: cursive;
}
.card:hover {
color: rgb(88 199 250 / 100%);
transition: color 1s;
}
.card:hover:before, .card:hover:after {
animation: none;
opacity: 0;
}

.card::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(
var(--rotate)
, #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
animation: spin 2.5s linear infinite;
}
.card::after {
position: absolute;
content: "";
top: calc(var(--card-height) / 6);
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.8);
filter: blur(calc(var(--card-height) / 6));
background-image: linear-gradient(
var(--rotate)
, #5ddcff, #3c67e3 43%, #4e00c2);
opacity: 1;
transition: opacity .5s;
animation: spin 2.5s linear infinite;
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
a {
color: #212534;
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
margin-top: 2rem;
}

CSS Effects On Button Mouse Hover

Nine Buttons Different Types Mouse Hover Effects

Button Mouse Hover Effect HTML

<div class="container">
<div class="button">Center -> out</div>
<div class="button">Left -> Right -> Left</div>
<div class="button">Left -> Right -> Right</div>
<div class="button">Top -> Bottom -> Top</div>
<div class="button">Skew Fill Left -> Right</div>

<div class="button">Rounded Corners</div>
<div class="button">Scale</div>
<div class="button">Border (Inner Shadow)</div>
<div class="button">Border (Outer Shadow)</div>
</div>

Button Mouse Hover Effect CSS

body {
background: linear-gradient(135deg, rgba(85,239,203,1) 0%,rgba(30,87,153,1) 0%,rgba(85,239,203,1) 0%,rgba(91,202,255,1) 100%);
color: #f7f7f7;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 60vw;
max-width: 1200px;
margin: 0 auto;
min-height: 100vh;
}
.button {
flex: 1 1 auto;
margin: 10px;
padding: 20px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
overflow:hidden;
transition: .3s;
&:after {
position: absolute;
transition: .3s;
content: '';
width: 0;
left: 50%;
bottom: 0;
height: 3px;
background: #f7f7f7;
}
&:nth-of-type(2):after {
left: 0;
}
&:nth-of-type(3):after {
right: 0;
left: auto;
}
&:nth-of-type(4):after {
left: 0;
bottom: auto;
top: -3px;
width: 100%;
}
&:nth-of-type(5):after {
height: 120%;
left: -10%;
transform: skewX(15deg);
z-index: -1;
}
&:hover {
cursor: pointer;
&:after {
width: 100%;
left: 0;
}
&:nth-of-type(4):after {
top: calc(100% - 3px);
}
&:nth-of-type(5) {
color: #5bcaff;
}
&:nth-of-type(5):after {
left: -10%;
width: 120%;
}
// &:nth-of-type(6) {
// flex-grow:3;
// }
// &:nth-of-type(6):after {
// width: 0%;
// }
&:nth-of-type(6) {
border-radius: 30px;
}
&:nth-of-type(6):after {
width: 0%;
}
&:nth-of-type(7) {
transform: scale(1.2);
}
&:nth-of-type(7):after {
width: 0%;
}
&:nth-of-type(8) {
box-shadow: inset 0px 0px 0px 3px #f7f7f7;
}
&:nth-of-type(8):after {
width: 0%;
}
&:nth-of-type(9) {
box-shadow: 0px 0px 0px 3px #f7f7f7;
}
&:nth-of-type(9):after {
width: 0%;
}
}
}

CSS Mouse Hover Zoom Scale

This CSS Coding Create Scale (Zoom) Effects For Website Images

Mouse Hover Zoom Scale HTML

Mouse Hover Zoom Scale CSS

.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;
background-color:#00506b;}
.style_prevu_kit
{
display:inline-block;
border:0;
width:196px;
height:210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.style_prevu_kit:hover
{
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}

Profile CSS Hover Effect

Css Mouse Over Effect For Website Profile

Profile CSS Hover Effect HTML

<div class="container">
<h1>Profile CSS Hover Effect</h1>
<h2>HTML + CSS ONLY</h2>
<div class="service-details">
<img src="https://i.imgur.com/SkFZNy4.jpg" alt="realm">
<div class="service-hover-text">
<h3>websitedesign99</h3>
<h4>Developer</h4>
<p>website about design beautiful website with CSS Html and javascript coding.</p>
</div>
<div class="service-white service-text">
<p>websitedesign99</p>
<a href="#">@websitedesign99</a>
</div>
</div>
</div>

Profile CSS Hover Effect CSS

@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body {
background:#485b6e;
}
.container {
max-width:500px;
margin-left:auto;
margin-right:auto;
margin-top:10%;
}
h1 {
font-family: "Open Sans", sans;
font-weight:300;
text-align:center;
color:rgba(255,255,255,0.6)
}
h2 {
color:#2c3e52;
font-family: "Open Sans", sans;
font-size: 14px;
text-align:center;
font-weight:700;
margin-bottom:50px;

}
.service-details {
/*width: 460px;*/
height: 250px;
/*height: 230px;*/
overflow: hidden;
position: relative;
}
.service-details img {
position: absolute;
top: 0;
left: 0;
height: inherit;
width: auto;
height: 100%;
float: left;
transition: all 0.8s;
-moz-transition: all 0.8s;
}
.service-details:hover img {
/*opacity: 0.4 !important;*/
}
.service-details .service-hover-text h3 {
padding: 0px;
margin: 0px;
font-size: 25px;
font-weight:300;
font-family: "Open Sans";
}
.service-details .service-hover-text h4 {
padding: 0px;
padding-bottom: 13px;
margin: 0px;
font-size: 14px;
letter-spacing: 3px;
width: 90%;
font-family: "Open Sans";
text-transform:uppercase;
border-bottom: 2px solid #000;
}
.service-details .service-hover-text p {
padding-top: 13px;
font-size: 14px;
line-height: 20px;
font-family: "Open Sans";
}

.service-details .service-hover-text{
width: 42%;
height: 89%;
position: absolute;
top: 0%;
left: 50%;
padding: 3% 4%;
background: #D90E0E;
color: rgba(255,255,255,1);
/* display: none;*/
transition: all 0.5s ease-in-out;
-moz-transition: all 0.4s;
}
.service-details:hover .service-hover-text {
display: block !important;
color: rgba(255,255,255,1);
background:rgba(217,14,14,0.85);
left: 0px;
top: 0px;
}

.service-details .service-text {
width: 50%;
height: inherit;
background: #000;
float: left;
position: absolute;
left: 50%;
}
.service-details .service-text p {
padding:100px 0px 0px 20px;
font-size: 24px;
font-family: "Open Sans";
font-weight:700;
color: #fff;
}
.service-details .service-text p span {
font-family: "Open Sans" !important;
}
.service-details .service-text a , .service-white .service-text {
padding: 0px 0px 0px 20px;
font-size: 14px !important;
color:#FF5A22 !important;
font-family: "Open Sans" !important;
text-decoration: none !important;
}
.service-details .service-text {
float: left;
}
.service-white {
background: #eee !important;
width: 50% !important;
height: inherit !important;
}
.service-white p {
color: #000 !important;
}

Website Design99