Contrast on Hover

contrast-on-hover.markdown

Contrast on Hover

My pen for the November 2020 CodePen Challenge. Contrast on hover using jQuery. Wanted to do it with pure CSS but couldn't find a way that would work due to how the divs are set up.

A Pen by Emma on CodePen.

License.

index.html

<!-- Hello! This is my first pen and first Codepen challenge -->
<!-- Any feedback on code/process is very appreciated -->
<!-- I'm only a student though, so pls be nice :) -->

   <div class="letter-1">
        C
   </div>
   <div class="heart">
   </div>
   <div class="letter-2">
        <p>DEPEN</p>
   </div>

<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

script.js

//TEXT TRANSFORM ON HOVER
$(document).ready(function () {
    $(".heart").hover(function () {
        $(".letter-1").css("color", "#FDB9C8");
        $(".letter-2").css("color", "#FDB9C8");
    });
    $(".heart").mouseleave(function () {
        $(".letter-1").css("color", "");
        $(".letter-2").css("color", "");
    });
});

style.css

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background-color: #222222;
  /*LETTERS*/
  font-family: sans-serif;
  font-size: 5.5em;
  letter-spacing: 25px;
  color: #E1E1E1;
  text-shadow: 3px 2px #696969;
}

/*LETTER DIVS*/
#letter-1 {
  margin-right: 10px;
}

.letter-2 {
  margin-left: 30px;
}

/*HEART*/
.heart {
  background-color: #656565;
  position: relative;
  height: 45px;
  width: 45px;
  transform: rotate(-45deg);
  display: inline-block;
}

.heart:hover {
  animation: heartbeat 1500ms linear infinite;
  background-color: #DE3163;
}

.heart::after {
  background-color: inherit;
  position: absolute;
  height: inherit;
  width: inherit;
  top: -50%;
  left: 0;
  border-radius: 50%;
  content: "";
}

.heart::before {
  background-color: inherit;
  position: absolute;
  height: inherit;
  width: inherit;
  top: 0;
  right: -50%;
  border-radius: 50%;
  content: "";
}

/*ANIMATION*/
@keyframes heartbeat {
	0% {
    transform: rotate(-45deg) scale(1);
    background-color: #DE3163;
    
	}
	
	5% {
    transform: rotate(-45deg) scale(1.1);
    background-color: #DE3163;
    
	}
	
	15% {
    transform: rotate(-45deg) scale(0.9);
    background-color: #FE7F9C;
    
	}
	
	25% {
    transform: rotate(-45deg) scale(1.2);
    background-color: #DE3163;
    
	}

	35% {
    transform: rotate(-45deg) scale(0.9);
    background-color: #DE3163;
    
	}

	45% {
    transform: rotate(-45deg) scale(1.05);
    background-color: #FE7F9C;
    
	}

	55% {
    transform: rotate(-45deg) scale(0.95);
    background-color: #DE3163;
    
	}

	65% {
    transform: rotate(-45deg) scale(1);
    background-color: #DE3163;
    
	}
}