CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 99

How to limit effective area of a text to its sibling image?

I have two images with round corners that act as buttons. When the mouse pointer hovers over those images, the image dims and a text appears. The problem is that the text line has an effective area larger than the image display size. I want to make the text to be effective just in image boundaries. How can I fix this issue? I have used this HTML/CSS code:

<!DOCTYPE html>
<html lang="fa">
    <head>
        <title>]Information System</title>
        <style>
            #main-image{
                display: block;
                margin-left: auto;
                margin-right: auto;
                max-width: 100%;
                max-height: auto;
            }
            h1{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                color:floralwhite;
                user-select: none;
            }
            .sub-image{
                border-radius: 5%;
            }
            .container{
                float: left;
                width: 20%;
                padding: 5%;
            }
            .image-text{
                opacity: 0;
                transition: 0.5s;
            }
            .sub-image:hover {
                opacity: 0.3;
                transition: 0.5s;
            }
            .sub:hover .image-text{
                opacity: 1;
                transition: 0.5s;
            }
            .row::after{
                clear: both;
            }
            .container{
                position: relative;
                text-align: center;
            }
            .container .image-text{
                position: absolute;
                left: 0;
                right: 0;
                top: 60%;
                text-align: center;
                color: cornsilk;
            }


        </style>
    </head>
    <body bgcolor="black">
        <div>
            <img id="main-image" src="Images/IT.jpg" width="1600" alt="Intro">
        </div>
        <hr>
        <div class="row">
            <div class="container">
                <a href="https:www.google.com">
                    <div class="sub">
                        <img class="sub-image" src="Images/repair.jpg" width="300">
                        <div class="image-text">
                            <h1>Failures</h1>
                        </div>
                    </div>
                </a>
            </div>
            <div class="container">
                <a href="https:www.google.com">
                    <div class="sub">
                        <img class="sub-image" src="Images/Equipment.jpg" width="300">
                        <div class="image-text">
                            <h1>Equipments</h1>
                        </div>
                    </div>
                </a>

            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 50

Answers (1)

Vijayaraghavan Sundararaman
Vijayaraghavan Sundararaman

Reputation: 932

You can add the below css. This will ensure the h1 is positined relative to the sub class and any overflow will be hidden. You can remove the text-overflow ellipsis if you don't want to show that there is more text


            .sub{
                position: relative;
            }
            .image-text h1{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

To blur background even on text hover use parent selector of .sub instead of .sub-image like below

            .sub:hover .sub-image {
                opacity: 0.3;
                transition: 0.5s;
            }

Upvotes: 1

Related Questions