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">

        @import url(https://fonts.googleapis.com/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.com/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);


    <meta charset="UTF-8">
    <div class='badge'>
  <div class='text'>’Hallo!</div>

  • 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
    Jan 29, 2020 at 19:39
  • I am working on a wordpress site which has wpbakery page builder installed.
    – Ashur
    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
    Jan 30, 2020 at 8:24

1 Answer 1

  1. Your theme might already have an animation feature, you can just add the class.
  2. You can add a plugin like so..https://wordpress.org/plugins/animate-it/ and add the class to the featured image property for it to work.
  3. If you use a builder (like Elementor) you can easily create your layouts and add animations to each element.
  • Actually posts and pages are working by the help of wpbakery page builder plugin. that makes things complex.
    – Ashur
    Jan 30, 2020 at 8:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.