Rellenar tarjeta al pasar el mouse

1454 Andev.web

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

21 May 2024

Plantilla Gratuita de Página de Aterrizaje

6 November 2024

Efecto de texto de corte

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
    <div class="darksoul-card1">
        <div class="circle1"></div>
        <img src="https://darksoul-codepen.github.io/assets/images/instagram-white-icon.webp" alt="DarkSoul - Instagram" width="25" height="25" style="z-index: 100;" />
        <h2 class="content">Instagram</h2>
    </div>
    </a>
    <div class="darksoul-card2">
        <div class="circle2"></div>
        <img src="https://darksoul-codepen.github.io/assets/images/codepen_logo.png" alt="DarkSoul - CodePen" width="25" height="25" style="z-index: 100;" />
        <p class="content">CODEPEN</p>
    </div> 
    </a> 
    <div class="darksoul-card3">
        <div class="circle3"></div>
        <img src="https://darksoul-codepen.github.io/assets/images/dribbble_logo.png" alt="DarkSoul - Dribbble" width="25" height="25" style="z-index: 100;" />
        <h4 class="content" style="font-weight: 600;">Dribbble</h4>
    </div>
    </a>
  
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Rubik+Vinyl&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

body
        {
            width: 100%;
            height: 100vh;
            margin: 0;
            display: flex;
            font-family: 'Belanosima', sans-serif;
           
        }
        a
        {
            margin: auto;
            text-decoration: none;
        }
        .darksoul-card1
        {
            display: flex;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 255);
            box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
            border-radius: 15px;
            transition: all 2s;
            align-items: start;
            justify-content: right;
            font-family: "Grand Hotel", cursive;
        }
        .darksoul-card2
        {
            display: flex;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 255);
            box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
            border-radius: 15px;
            transition: all 2s;
            align-items: start;
            justify-content: center;
            font-family: 'Belanosima', sans-serif;
        }
        .darksoul-card3
        {
            display: flex;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 255);
            box-shadow: 5px 5px 60px rgb(235, 235, 235), -5px -5px 60px rgb(237, 237, 237);
            border-radius: 15px;
            transition: all 2s;
            align-items: end;
            justify-content: left;
            font-family: "Kaushan Script", cursive;
        }
        .circle1
        {
            position: absolute;
            margin: auto;
            margin-right: 0px;
            width: 50px;
            height: 50px;
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
            border-radius: 0px 15px 0px 50px;
            transition: all 0.5s;
            
        }
        .darksoul-card1:hover .circle1
        {

background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .darksoul-card1:hover .content
        {
            color: white;
        }
        .circle2{
            position: absolute;
            margin: auto;
            margin-top: 35px;
            width: 50px;
            height: 50px;
            background-color: rgb(42, 42, 42);
            border-radius: 50%;
            transition: all 0.5s;
        }
        .darksoul-card2:hover .circle2
        {
            margin-top: 0px;
            background-color: rgb(42, 42, 42);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .darksoul-card2:hover .content
        {
            color: white;
        }
        .circle3
        {
            position: absolute;
            margin: auto;
            margin-top: 35px;
            width: 50px;
            height: 50px;
            background-color: rgb(255, 201, 201);
            border-radius: 0px 50px 0px 15px;
            transition: all 0.5s;
            
        }
        .darksoul-card3:hover .circle3
        {
            margin-top: 0px;
            background-color: rgb(255, 201, 201);
            width: 200px;
            height: 200px;
            border-radius: 15px;
            transition: all 0.5s;
        }
        .content
        {
            margin: auto;
            z-index: 100;
            color: black;
            font-weight: 500;
        }
        @media only screen and (max-width: 600px) 
        {
            body
            {
                flex-direction: column;
            }
        }
        .darksoul-card1 img
        {
            position: absolute;
            margin: auto;
            padding-top: 8px;
            padding-right: 8px;
        }
        .darksoul-card2 img
        {
            position: absolute;
            margin: auto;
            margin-top: 35px;
            padding-top: 12px;
        }
        .darksoul-card3 img
        {
            position: absolute;
            margin: auto;
            padding-left: 8px;
            padding-bottom: 8px;
        }
        .disclaimer
        {
            position: absolute;
            bottom: 0px; 
            left: 0; 
            margin-left: auto; 
            right: 0; 
            margin-right: auto; 
            width: fit-content;
            color: rgb(0, 0, 0);
            text-align: center;
        }
        .disclaimer a
        {
            text-decoration: none;
            color: #202020;
            font-family: "Kaushan Script", cursive;
            font-weight: 900;
        }
        .disclaimer a:hover
        {
            text-decoration: overline;
        }

Rellenar tarjeta al pasar el mouse

Recomendado

juego de serpiente

Plantilla Gratuita de Página de Aterrizaje

Efecto de texto de corte

HTML

CSS

JS

Recomendado

juego de serpiente

Plantilla Gratuita de Página de Aterrizaje

Efecto de texto de corte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS