By default I choose featured image from media library. When I hover over each, It shows a black overlay with a plus sign. I have a cool css animation and want to add it to each post featured image. Below is the css animation code that I got from codepen. Anyone know how to do that? I just what to do it. Whether by adding custom css or using hooks or filter or from style.css. the simplest is better.
Any help is most appreciated. Thanks in advance.
<!--------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url(:300);
html {
height: 100%;
}
@media (max-width: 32rem) {
html {
font-size: 12px;
}
}
body {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
background: linear-gradient(#333, #111);
min-height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
.badge {
display: block;
position: relative;
width: 25rem;
height: 20rem;
cursor: pointer;
background: url() no-repeat 100% 50%;
background-size: 120%;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.75);
}
.badge:hover {
box-shadow: 0px 0.5rem 2rem rgba(0, 0, 0, 0.75);
background-position: 0% 50%;
}
.badge:hover .text {
-webkit-transform: rotate(-45deg) translate(0px) rotate(-315deg);
transform: rotate(-45deg) translate(0px) rotate(-315deg);
background: rgba(102, 51, 153, 0.5);
width: 25rem;
letter-spacing: 1rem;
line-height: 20rem;
height: 20rem;
border-radius: 0%;
margin-top: -10rem;
margin-left: -12.5rem;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
}
.badge .text {
display: block;
position: absolute;
width: 10rem;
height: 10rem;
line-height: 10rem;
left: 50%;
top: 50%;
margin-top: -5rem;
margin-left: -5rem;
font-size: 2rem;
font-family: Raleway, sans-serif;
text-align: center;
color: #fff;
border-radius: 50%;
background: rebeccapurple;
-webkit-transform: rotate(-180deg) translate(-10rem) rotate(180deg);
transform: rotate(-180deg) translate(-10rem) rotate(180deg);
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
</style>
<meta charset="UTF-8">
<title>animation</title>
</head>
<body>
<div class='badge'>
<div class='text'>’Hallo!</div>
</div>
</body>
</html>
<!--------------------------------------------------------------------------->
By default I choose featured image from media library. When I hover over each, It shows a black overlay with a plus sign. I have a cool css animation and want to add it to each post featured image. Below is the css animation code that I got from codepen. Anyone know how to do that? I just what to do it. Whether by adding custom css or using hooks or filter or from style.css. the simplest is better.
Any help is most appreciated. Thanks in advance.
<!--------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url(https://fonts.googleapis/css?family=Raleway:300);
html {
height: 100%;
}
@media (max-width: 32rem) {
html {
font-size: 12px;
}
}
body {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
background: linear-gradient(#333, #111);
min-height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
.badge {
display: block;
position: relative;
width: 25rem;
height: 20rem;
cursor: pointer;
background: url(https://source.unsplash/random/1000x1000) no-repeat 100% 50%;
background-size: 120%;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.75);
}
.badge:hover {
box-shadow: 0px 0.5rem 2rem rgba(0, 0, 0, 0.75);
background-position: 0% 50%;
}
.badge:hover .text {
-webkit-transform: rotate(-45deg) translate(0px) rotate(-315deg);
transform: rotate(-45deg) translate(0px) rotate(-315deg);
background: rgba(102, 51, 153, 0.5);
width: 25rem;
letter-spacing: 1rem;
line-height: 20rem;
height: 20rem;
border-radius: 0%;
margin-top: -10rem;
margin-left: -12.5rem;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
}
.badge .text {
display: block;
position: absolute;
width: 10rem;
height: 10rem;
line-height: 10rem;
left: 50%;
top: 50%;
margin-top: -5rem;
margin-left: -5rem;
font-size: 2rem;
font-family: Raleway, sans-serif;
text-align: center;
color: #fff;
border-radius: 50%;
background: rebeccapurple;
-webkit-transform: rotate(-180deg) translate(-10rem) rotate(180deg);
transform: rotate(-180deg) translate(-10rem) rotate(180deg);
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
</style>
<meta charset="UTF-8">
<title>animation</title>
</head>
<body>
<div class='badge'>
<div class='text'>’Hallo!</div>
</div>
</body>
</html>
<!--------------------------------------------------------------------------->
- 1 There are various ways to add custom CSS. Check your theme first and see if it has a "custom CSS" area, often found in the Customizer. If not, there are plugins you can use to add your own CSS. Or, you can build a child theme or a plugin to enqueue your own CSS file. – WebElaine Commented Jan 29, 2020 at 19:39
- I am working on a wordpress site which has wpbakery page builder installed. – Ashur Commented Jan 30, 2020 at 8:14
- in the animation I want to add, there are is a div that I should add to the html and some css to add to the custom css. even if I find how to add custom css to the featured image. I am still confused where to find the featured image html code to add that div. I am working on a theme named highend. from theme editor I can acess to style.css or any other php files. The only problem I have is where to find featured image html codes. – Ashur Commented Jan 30, 2020 at 8:24
1 Answer
Reset to default 1- Your theme might already have an animation feature, you can just add the class.
- You can add a plugin like so..https://wordpress/plugins/animate-it/ and add the class to the featured image property for it to work.
- If you use a builder (like Elementor) you can easily create your layouts and add animations to each element.