Div-Card mit Hover-Farb-Effekt

<- Zurück

In diesem Artikel habe ich dir einen einfachen Div-Container mit Farb-Effekt zusammengestellt.
Hierbei handelt es sich um einen reinen HTML und CSS Container.

Hover-Farb-Effekt

Halte den Mauszeiger über diese Karte um den Effekt zu sehen.
Weiter unten findest du den zugehörigen Code (HTML und CSS).

Div-1:

HTML:

<div class="div-1">
     <b>Hover-Farb-Effekt</b>
         <p>Halte den Mauszeiger über diese Karte um den Effekt zu sehen.<br>
            Weiter unten findest du den zugehörigen Code (HTML und CSS).
         </p>
</div>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.div-1 {
  color: black;
  border-radius: 10px;
  filter: drop-shadow(0 5px 10px 0 #ffffff);
  display: inline-block;
  background-color: #ffffff;
  padding: 10px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: 0.6s ease-in;
}

.div-1::before {
  content: "";
  position: absolute;
  height:220px;
  width: 25px;
  z-index: -1;
  top: -15px;
  right: -15px;
  background: #7952b3;
  
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}

.div-1:hover::before{
    transition-delay:0.2s ;
    transform: scale(50);
    display: inline-block;
}

.div-1:hover {
    color: #ffffff;
    display: inline-block;
}

.div-1 p{
    padding: 10px 0;
}

<- Zurück