Html - make it constantly blinks / glows when mouse hovers over the image

happykuromi
February 27, 2024
178 views
0 votes
2 Answers

I created an image animation using CSS and Javascript, and I would like to make it constantly blinks / glows (with the pink colour) when the mouse cursor hovers on the image. how should I change the code and using the javascript to achieve this?

Here is the source code that I’ve tried.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  outline: 0;
  border: none;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #22232e;
}
button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
}
button .btn-img{
  padding: 10px 15px;
  font-size: 13px;
  text-align: center;
  color: #e0ffff;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  background: rgba(0,73,88,0.05);
  backdrop-filter: blur(15px);
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
}
button::before{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3px;
  width: 25%;
  height: 10px;
  background: #00c2cb;
  border-radius: 10px;
  transition: .5s;
  box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
button:hover::before{
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
  /* background: #ffbd1f; */
  background: #db0079;
}

<button>
  <span class="btn-img">
    <img src="https://img1.daumcdn.net/thumb/R48x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtKZbq%2FbtsEb7zLet0%2FHDOJKKBGmhp3kWrFZXXTFk%2Fimg.png"></br><div id="tr" style="display: table-cell; text-align: center; color: rgb(255,255,255)";>Sample
  </span>
</button>

to see the demo, please take a look at the codepen.

thank you.

Answers

You can do this without Javascript. Using css animations

First you define an element called @keyframes and give it a name (this defines the name of your animation, so you can use it on many components) and inside you set the steps the animation takes, in this case you can vary the background like below (please note that the start and end are equal so the animation "loops" smoothly. Also the steps are not equaly space to give it some dynamic to the blink).

@keyframes blink {
  0% {background: #00c2cb; }
  90% {background: #db0079; }
  100% {background: #00c2cb; }
}

Then you set your animation-name (that you defined) your animation-duration (how fast to do the animation) your animation-iteration-count (how many times to repeat the animation, in this case infinite) and you’re good to go

See a working example below:

@keyframes blink {
  0% {background: #00c2cb; }
  90% {background: #db0079; }
  100% {background: #00c2cb; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  outline: 0;
  border: none;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #22232e;
}
button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
}
button .btn-img{
  padding: 10px 15px;
  font-size: 13px;
  text-align: center;
  color: #e0ffff;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  background: rgba(0,73,88,0.05);
  backdrop-filter: blur(15px);
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
}
button::before{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3px;
  width: 25%;
  height: 10px;
  background: #00c2cb;
  border-radius: 10px;
  transition: .5s;
  box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
button:hover::before{
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
  /* background: #ffbd1f; */
  /*background: #db0079; */
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<button>
  <span class="btn-img">
    <img src="https://img1.daumcdn.net/thumb/R48x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtKZbq%2FbtsEb7zLet0%2FHDOJKKBGmhp3kWrFZXXTFk%2Fimg.png">
    </br>
    <div id="tr" style="display: table-cell; text-align: center; color: rgb(255,255,255)";>
      Sample
    </div>
  </span>
</button>

BTW: your HTML has some issues, like extra closing tags and divs inside spans. I did not modify it too much to focus on the question but you might want to take a look at that

Animation for a more subtle "breathing" effect on the pink colour – using css animation

The breathing effect is achieved by animating the opacity of the ::before pseudo element from 1 to 0.5 and back to 1

animation: 1500ms ease-in-out 1s infinite alternate breathing;

To explain the values in animation – the above is short for

animation-duration: 1500ms; /* could also use 1.5s here */
animation-timing-function: ease-in-out; /* I find this pleasing for the effect */
animation-delay: 1s; /* so the breathing starts right when the transition ends */
animation-iteration-count: infinite; /* self explanatory */
animation-direction: alternate; /* i.e. alternating */
animation-name: breathing; /* i.e. the @keyframes to use */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  outline: 0;
  border: none;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #22232e;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
}

button .btn-img {
  padding: 10px 15px;
  font-size: 13px;
  text-align: center;
  color: #e0ffff;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  background: rgba(0, 73, 88, 0.05);
  backdrop-filter: blur(15px);
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
}

button::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3px;
  width: 25%;
  height: 10px;
  background: #00c2cb;
  border-radius: 10px;
  transition: .5s;
  box-shadow: 0 0 10px rgba(0, 194, 203, 0.5);
}

button:hover::before {
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
  /* background: #ffbd1f; */
  background: #db0079;
  /* added animation */
  animation: 1500ms ease-in-out 1s infinite alternate breathing;
}
/* key frames for animation */
@keyframes breathing {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

<button>
  <span class="btn-img">
    <img src="https://img1.daumcdn.net/thumb/R48x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtKZbq%2FbtsEb7zLet0%2FHDOJKKBGmhp3kWrFZXXTFk%2Fimg.png"></br><div id="tr" style="display: table-cell; text-align: center; color: rgb(255,255,255)";>Sample
  </span>
</button>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – make it constantly blinks / glows when mouse hovers over the image

Answers