Text Hover Phần 3 (ok)
https://codepen.io/tdevine33/pen/cjFbt
Last updated
https://codepen.io/tdevine33/pen/cjFbt
Last updated
Ví dụ 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Document</title>
</head>
<body>
<h1>Wacom Hover Effect</h1>
<a href="#" data-text="Read More 1" class="button-hover">Read More</a>
<a href="#" data-text="Learn More 2" class="button-hover">Learn More</a>
<a href="#" data-text="Read Article" class="button-hover">Read Article</a>
<a href="#" data-text="Download" class="button-hover">Download</a>
<style>
*,
:before,
:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #eee;
}
h1 {
font: 300 3em/1em 'Open Sans', sans-serif;
border-bottom: solid 2px #000;
margin-bottom: 1em;
padding-bottom: 1em;
}
.button,
[class*="button-"] {
position: relative;
display: inline-block;
overflow: hidden;
float: left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text-decoration: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
-moz-transition: ease 0.35s all;
-o-transition: ease 0.35s all;
-webkit-transition: ease 0.35s all;
transition: ease 0.35s all;
}
.button:hover,
[class*="button-"]:hover {
background: #007DA7;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
}
.button-hover:hover {
line-height: 9em;
}
.button-hover:before {
content: attr(data-text);
color: #DEEFF5;
position: absolute;
top: -2.75em;
}
</style>
</body>
</html>maVí dụ 2:
https://codepen.io/chrisdothtml/pen/OVmgwK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="tiles">
<a class="tile" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" />
<div class="details"><span class="title">Lorem Ipsum Dolor</span><span class="info">Quisque vel felis lectus donec vitae dapibus magna</span></div>
</a>
<a class="tile" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/2.jpg" />
<div class="details"><span class="title">Lorem Ipsum Dolor</span><span class="info">Quisque vel felis lectus donec vitae dapibus magna</span></div>
</a>
<a class="tile" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/3.jpg" />
<div class="details"><span class="title">Lorem Ipsum Dolor</span><span class="info">Quisque vel felis lectus donec vitae dapibus magna</span></div>
</a>
<a class="tile" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/4.jpg" />
<div class="details"><span class="title">Lorem Ipsum Dolor</span><span class="info">Quisque vel felis lectus donec vitae dapibus magna</span></div>
</a>
</div>
<style>
/* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
.tiles {
width: 1040px;
font-size: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tiles .tile {
display: inline-block;
margin: 10px;
text-align: left;
opacity: 0.99;
overflow: hidden;
position: relative;
border-radius: 3px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
}
.tiles .tile:before {
content: "";
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
transition-property: top, opacity;
transition-duration: 0.3s;
}
.tiles .tile img {
display: block;
max-width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.tiles .tile .details {
font-size: 16px;
padding: 20px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
}
.tiles .tile .details span {
display: block;
opacity: 0;
position: relative;
top: 100px;
transition-property: top, opacity;
transition-duration: 0.3s;
transition-delay: 0s;
}
.tiles .tile .details .title {
line-height: 1;
font-weight: 600;
font-size: 18px;
}
.tiles .tile .details .info {
line-height: 1.2;
margin-top: 5px;
font-size: 12px;
}
.tiles .tile:focus:before,
.tiles .tile:focus span,
.tiles .tile:hover:before,
.tiles .tile:hover span {
opacity: 1;
}
.tiles .tile:focus:before,
.tiles .tile:hover:before {
top: 50%;
}
.tiles .tile:focus span,
.tiles .tile:hover span {
top: 0;
}
.tiles .tile:focus .title,
.tiles .tile:hover .title {
transition-delay: 0.15s;
}
.tiles .tile:focus .info,
.tiles .tile:hover .info {
transition-delay: 0.25s;
}
</style>
</body>
</html>Ví dụ 3: Màu vàng rực sáng
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<ul>
<li>
<a href="#">
<i class="fab fa-edge"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-firefox"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-chrome"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-opera"></i>
</a>
</li>
</ul>
<style>
body {
margin: 0;
padding: 0;
background: #262626;
}
ul {
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
margin: 0 15px;
}
ul li a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: #333;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: .5s;
}
ul li a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ffee10;
transition: .5s;
transform: scale(.9);
z-index: -1;
}
ul li a:hover::before {
transform: scale(1.1);
box-shadow: 0 0 15px #ffee10;
}
ul li a:hover {
color: #ffee10;
box-shadow: 0 0 5px #ffee10;
text-shadow: 0 0 5px #ffee10;
}
</style>
</body>
</html>
