Rellenar tarjeta al pasar el mouse

2204 Andev.web

Abrir en el editor Video Publica tu código

Recomendado

15 January 2025

Página 404 No Encontrada con CSS

18 November 2025

Metehan

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

Escalada de la torre circular

Página 404 No Encontrada con CSS

Metehan

HTML

CSS

JS

Recomendado

Escalada de la torre circular

Página 404 No Encontrada con CSS

Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS