Question 61288 in Twitter Bootstrap Question posted in

Make a paragraph visible through parent object-Twitter bootstrap

I’m doing a small assignment and therefore not allowed to use javascript. Only html and css. I made a simple gallery with products and when I hover over them I’d like the small paragraph to become visible. Is there a way to ‘call’ the paragraph from the .product-container? I tried adding a + p but that doesn’t seem to work. I also don’t want to make a specific class for every div so ideally only the corresponding products paragraph is visible when hovering and not all of them. Hope you understand what I mean, I don’t know the exact phrases to use since I’m very new.

#navbarDog {
    background-color: #F5EFE6;
}

#logo {
    height: 100px;
}
body{
    font-family: "Montserrat";
    font-weight: bold;
    size: 3rem;
    line-height: 1, 5;
}

.nav-link {
    font-size: 20px;
    transition: font-size 0.4s;
}

.nav-link:hover {
    font-size: 25px;
}

.header-products {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8DFCA;
    padding: 50px;
}

main {
    background-color: #AEBDCA;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.gallery img {
    background-color: transparent;
    width: 100%;
    height: 350px;
    padding: 10px;
    object-fit: contain;
    position: relative;
}
.product-container p{
    visibility: hidden;
}
/* .gallery img:hover {
    z-index: 9;
    transform: scale(1.3);
    transition: transform ease 0.5s;
} */
.product-container:hover {
    z-index: 9;
    transform: scale(1.3);
    transition: transform ease 0.5s;
    visibility: visible;
}

@media only screen and (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

#footer {
    background-color: #7895B2;
    padding: 4%;
    text-align: center;
}

.footer-icon {
    color: #fe0707;
    margin: 20px 10px;

    text-decoration: none;

}

/* Adds color to hovering state (element.class.action in this order) */
a.footer-icon:hover {
    color: #41678e;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
    rel="stylesheet">
    <script src="https://kit.fontawesome.com/b88143462d.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
        crossorigin="anonymous"></script>
</head>

<body>
    <nav class="navbar navbar-expand-lg" id="navbarDog">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.html"><img src="../img/logo.png" alt="" id="logo"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav w-100 mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="products.html">Products</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.html">News</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">About</a>
                    </li>
                    <form class="d-flex ms-auto">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
            </div>
        </div>
    </nav>
    <header class="header-products">
        <h1>Products</h1>
    </header>
    <main>
        <div class="gallery">
            <div class="product-container">
                <img src="../img/tshirt-beighe.jpg" alt="">
                <p>A stylish t-shirt made of 100% cotton. 450SEK</p>
            </div>
            <img src="../img/tshirt-blue.jpg" alt="">
            <img src="../img/tshirt-gray.jpg" alt="">
            <img src="../img/tshirt-white.jpg" alt="">
            <img src="../img/tshirt-yellow.jpg" alt="">
        </div>
    </main>
    <footer id="footer">
        <a href="https://www.instagram.com/" class="footer-icon fa-brands fa-instagram"></a>
        <a href="https://www.facebook.com/" class="footer-icon fa-brands fa-facebook"></a>
        <a href="https://twitter.com/" class="footer-icon fa-brands fa-twitter"></a>
        <a href="https://www.snapchat.com/" class="footer-icon fa-brands fa-snapchat"></a>

        <p>© Copyright OnlyDogs</p>
    </footer>




</body>
Tags:

2

Answers


  1. 0

    Try this. Using general sibling selector. Doesn’t matter what order.

    img:hover ~ .product-container p {
 visibility: visible
}

    If that fails:
    Wrap your image in a link tag and then do this.

    a:hover img ~ .product-container p {
 visibility: visible
}
    Login or Signup to reply.
  2. 0

    You could add the hover on the parent element:

    .product-container p {
  display: none;
}
.product-container:hover p {
  display: block;
}
    <div class="product-container">
  <img src="https://via.placeholder.com/150" alt="">
  <p>A stylish t-shirt made of 100% cotton. 450SEK</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search