luisCavazos101
12/11/2019 - 8:07 PM

hover with an image an circles

hoverCards.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
    .flex{
        margin: auto;
        margin-top: 10%;
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .circle{
        border:#e6e6e6 3px solid;
        border-radius: 50%;
        padding: 50px;
        
    }
    .sub-flex:hover .circle{
        background-color: #ffb200;
    }
    .sub-flex:hover img{
        filter: brightness(0%);
       
       
    }

    /* sub title flex */
    .sub-flex{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position:relative;
    }
    .font{
        font-size:20px;
        font-weight: bold;
        font-family:"Helvetica Neue", Helvetica, Arial,sans-serif;
        margin-top: 5%;
    }
    .font:hover{
        cursor: pointer;
        color: #ffb200;
        text-decoration: underline;
    }
    p{
        width:50%;
        line-height: 1.5em;
        text-align:center;
    }
    .number{
        border:#333333 3px solid;
        border-radius: 50%;
        /* padding: 10px; */
        position: absolute;
        top:0%;
        left:60%;
        background-color: white;
       
       /* center and cirlce object */
        padding: 0px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .sub-flex:hover .number{
        color:white;
        background-color:#333333;
    }



    </style>
</head>
<body>
       
    <div class="flex">
        <div class="discover">
            <div class="sub-flex">
              
                <div class="circle"><img src="images/discorver-dot.png" alt=""><div class="number">1</div></div>
                <div class="font">Discover</div>
                <p>People with ideas and experience to develop a vision for the future</p>
            </div>
        </div>
        <div class="arrow"><img src="images/arrow-dot.png" alt=""></div>
        <div class="build">
            <div class="sub-flex">
                    
                <div class="circle"><img src="images/build-dot.png" alt=""><div class="number">2</div></div>
                <div class="font">Build</div>
                <p>The right tools at the right time enhances the shard economy</p>
            </div>
        </div>
        <div class="arrow"><img src="images/arrow-dot.png" alt=""></div>
        <div class="launch">
            <div class="sub-flex">
                    
                <div class="circle"><img src="images/launch-dot.png" alt=""><div class="number">3</div></div>
                <div class="font">Launch</div>
                <p>People with ideas and experience to develop a vision for the future</p>
            </div>
        </div>
    </div>
</body>
</html>