Show image details on hover?

I have six images displayed full width using a flex grid. I would like the image information (along with a visit button) to appear on hover, and the brightness of the image should decrease. I am struggling to position the information in the center of the image. Should I use relative positioning for the image and absolute positioning for the image info in this case? Thank you in advance

#works {
  color: rgba(31, 31, 31, 0.767);
  padding: 0;
  text-align: center; 

}

#works .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: stretch;

}

#works .flex-container .box {  
  display: flex; 
  flex-direction: column; 
  margin: 0; 
  padding: 0; 
  width: 33.3333%;

}

#works .flex-container .box img {    
  display: block;
  padding: 0;
  width: 100%;
}
...
...
...
        </div>


    </div>
</section>

htmlcss

Answer №1

Here are the steps you need to follow:

Make sure to apply position:relative to the .box element

Treat each .box as an individual display:flex element

Add flex-flow: column wrap to align the flex elements in columns instead of rows

Include justify-content: center to centrally position the content within the flex element (based on the flow)

Eliminate the margin-top from h4 (title) to correct alignment

View the sample code snippet here

#works {
  color: rgba(31, 31, 31, 0.767);
  padding: 0;
  text-align: center;
}

#works .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: stretch;
}

#works .flex-container .box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: 33.3333%;
}

#works .flex-container .box img {
  display: block;
  padding: 0;
  width: 100%;
}

.page-info {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  color: whitesmoke;
  visibility: hidden;
}

#works .flex-container .box:hover .page-info {
  visibility: visible;
}

#works .flex-container .box:hover .page-img {
  filter: brightness(30%);
}

#works .flex-container .box h4 {
  font-size: 1.8rem;
  margin-top: 0;
}

#works .flex-container .box p {
  font-size: 1rem;
}

.button {
  background: #3D4C53;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin-top: -5px;
  letter-spacing: 0.5rem;
...

    </div>


  </div>
</section>

Answer №2

To ensure your hover effect works properly, you must specify a relative position to the parent element.

Here is the updated code:

 #works {
  color: rgba(31, 31, 31, 0.767);
  padding: 0;
  text-align: center; 

}


#works .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: stretch;

}

#works .flex-container .box {  
  display: flex; 
  flex-direction: column; 
  margin: 0; 
  padding: 0; 
  width: 33.3333%;

}

#works .flex-container .box img {    
  display: block;
  padding: 0;
  width: 100%;
}

.page-info {
      position: absolute;
    padding: 0em 1em;
    bottom: 0.5em;
    color: whitesmoke;
    /* visibility: hidden; */
    display: none;
}

#works .flex-container .box:hover .page-info{
visibility: visible;
}

#works .flex-container .box:hover .page-img {
filter: brightness(30%); 
}



#works .flex-container .box h4 {
  font-size: 1.8rem;


}
#works .flex-container .box p {
  font-size: 1rem;
}

.button {
  background: #3D4C53;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin-top: -5px;
  letter-spacing: .5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: .2s;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}
.btnTwo {
  position: relative;
  width: 200px;
  height: 100px;
  margin-top: -100px;
  padding-top: 2px;
  background : rgb(96, 212, 185);
  left : -250px;
  transition : .3s;
}
.btnText {
  padding:0;
  color : white;
  transition : .3s;
}
.btnText2 {
  margin-top : 60px;
  margin-right : -135px;
  letter-spacing: .2rem;
  font-size: 1rem;
  color : #FFF;
}
.button:hover .btnTwo{ 
  left: -130px;
}
.button:hover .btnText{ 
  margin-left : 70px;
}
.button:active { 
  box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}
.box{position:relative}
.box:hover .page-info {
    display: block;
}
<section>
<div class="flex-container">

        <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>


    </div>
</section>

Answer №3

make sure to add position: relative for .box. Also, remove any negative margin and left adjustments from the .btntwo class. Hopefully, this resolves your issue.

#works {
  color: rgba(31, 31, 31, 0.767);
  padding: 0;
  text-align: center; 

}


#works .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: stretch;

}

#works .flex-container .box {  
  display: flex; 
  flex-direction: column; 
  margin: 0; 
  padding: 0; 
  width: 33.3333%;

}

#works .flex-container .box img {    
  display: block;
  padding: 0;
  width: 100%;
}

.page-info {
  position: absolute;;
  padding: 0em 1em;
  bottom: 0.5em; 
 color: whitesmoke;
  visibility: hidden;
}

.flex-container .box:hover .page-info{
visibility: visible;
}

#works .flex-container .box:hover .page-img {
filter: brightness(30%); 
}



#works .flex-container .box h4 {
  font-size: 1.8rem;


}
#works .flex-container .box p {
  font-size: 1rem;
}

.button {
  background: #3D4C53;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin-top: -5px;
  letter-spacing: .5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: .2s;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}
.btnTwo {
  position: relative;
  width: 200px;
  height: 100px;
  padding-top: 2px;
  background : rgb(96, 212, 185);
  transition : .3s;
}
.btnText {
  padding: 0;
  color : white;
  transition : .3s;
}
.btnText2 {
  margin-top : 60px;
  letter-spacing: .2rem;
  font-size: 1rem;
  color : #FFF;
}

.button:active { 
  box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}

.box{
  position: relative;
}
<div class="flex-container">
        <div class="box">
            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
         <div class="box">

        <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
        <div class="page-info">
            <h4>Title</h4>
            <div class="features">
                <p>Textt</p>

            </div>
            <a href="#" target="_blank" class="button">
                <p class="btnText">VISIT</p>
                <div class="btnTwo">
                    <p class="btnText2">NOW!</p>
                </div>
            </a>
        </div>


</div>
         <div class="box">

        <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
        <div class="page-info">
            <h4>Title</h4>
            <div class="features">
                <p>Textt</p>

            </div>
            <a href="#" target="_blank" class="button">
                <p class="btnText">VISIT</p>
                <div class="btnTwo">
                    <p class="btnText2">NOW!</p>
                </div>
            </a>
        </div>


</div>
         <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
         <div class="box">

        <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
        <div class="page-info">
            <h4>Title</h4>
            <div class="features">
                <p>Textt</p>

            </div>
            <a href="#" target="_blank" class="button">
                <p class="btnText">VISIT</p>
                <div class="btnTwo">
                    <p class="btnText2">NOW!</p>
                </div>
            </a>
        </div>


</div>
         <div class="box">

        <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
        <div class="page-info">
            <h4>Title</h4>
            <div class="features">
                <p>Textt</p>

            </div>
            <a href="#" target="_blank" class="button">
                <p class="btnText">VISIT</p>
                <div class="btnTwo">
                    <p class="btnText2">NOW!</p>
                </div>
            </a>
        </div>


</div>
    </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Picking specific <button> items

Presented here are a series of buttons to choose from: <button id="hdfs-test" type="button" class="btn btn-default btn-lg">HDFS</button> <button id="hive-test" type="button" class="btn btn-default btn-lg">HIVE</button> <button id ...

javascriptjqueryhtml

Using custom woff2 fonts in Android applications created with Visual Studio Community and Cordova seems to be causing compatibility issues

Help Needed! I am facing an issue with my app created using Visual Studio Community and Cordova. Everything works perfectly when I simulate it on my PC, but when I install it on my phone, the fonts just won't display correctly. I have tried all the s ...

androidhtmlcssvisual-studio-cordovacustom-font

Can I link the accordion title to a different webpage?

Is it possible to turn the title of an accordion into a button without it looking like a button? Here is an image of the accordion title and some accompanying data. I want to be able to click on the text in the title to navigate to another page. I am worki ...

javascriptcsshtmlcordova

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

javascripthtmlcsspolymerpolymer-3.x

JQuery drag and drop functionality experiencing issues in Chrome Browser specifically when integrated into a Joomla Article

I recently embedded a jQuery drag and drop example into my Joomla article. Surprisingly, it works perfectly fine on Firefox browser but encounters issues on Chrome. Although the drag and drop functionality works on Chrome, the problem is that the buttons b ...

javascriptjqueryhtml

Prevent form from being resubmitted upon browser refresh

Currently, I have a form where users input data and it searches the database to display results. The issue arises when the user refreshes the page as it triggers an alert about resubmission. Although the data remains the same upon resubmitting, is there a ...

phpjqueryhtmlmysqlajax

Tips for changing font styles using Polymer

I'm new to working with Polymer.js and CSS. My goal is to have text in todo.item display normally when todo.done is false, and with a line-through style when todo.done is true. I'm considering using CSS for this task, but I'm unsure how to ...

htmlcssrestpolymer

Deactivate a button based on a comparison condition

How can I prevent a button from being clickable when a specific condition is met? I attempted to do it this way, but it seems to be ineffective: <button type="text" disabled="{{candidature.statusCandidature.libelle == 'En cours' }}" >edit ...

htmlangular

Uncertain about the ins and outs of AJAX

I am a complete beginner in web development. Although I have studied JavaScript and HTML through books, my understanding is still limited. I have never worked with AJAX before and find most online examples too complex for me to follow. My goal is to crea ...

javascriptjqueryajaxhtml

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Currently, I'm in the process of creating a basic ToDo list using HTML, JS, and CSS. The last task on my list is to display to the user the total number of tasks and how many have been completed. For instance, if there are 3 completed tasks out of 7 i ...

javascripthtmlcss

Move a CSS div with animation to a specific fixed position

Is there a way to modify this code so that the ball moves to the right and remains in that position? http://codepen.io/chriscoyier/pen/pBCax You can experiment with the live version of the output by clicking on the link above. body { padding: 30px; } # ...

css

Navigating tables with Selenium WebDriver

I am struggling to locate and interact with a specific element in a table using Selenium WebDriver. The issue is that the table IDs are constantly changing, making it difficult for me to click on the desired element. For instance, consider the following t ...

htmlselenium

Pass the identical event to multiple functions in Angular 2

On my homepage, there is a search form with an input box and select dropdown for users to search for other users by location or using html5 geolocation. When a user visits the page for the first time, they are prompted to allow the app to access their loca ...

javascripthtmlangularangular2-formsangular4-forms

Exploring Scroll Functionality for Inner Components Within Mat-tab

I am currently working on a small attendance project that involves using table components within mat-tab elements. However, I am facing an issue where the overflow from the table causes the entire component to scroll, when in fact I only want the table its ...

htmlcssangularscrollangular-material

What is the best way to retrieve the background color of specific table cells?

I have a table that showcases various pieces of information. One interesting feature I added is a notes column, which includes a tooltip created using CSS and jQuery. However, there seems to be an issue with the tooltip's behavior - when I hover over ...

jqueryhtmlcss-tables

Struggling to make addClass and removeClass function correctly for the development of the unique "15 puzzle" game

I am currently in the process of creating a version of "the 15 game" using jQuery in HTML. You can find more information about the game on this page. The objective of the game is to rearrange a table of "boxes" in ascending order from 1 to 15. Below is th ...

javascriptjqueryhtmlcss

Invoking partial view via Ajax

I am using Ajax to call a partial view, but it is returning as undefined. This is my controller code: [HttpGet] public ActionResult CallPartial() { if (Request.IsAjaxRequest()) { return PartialView("~/Views/Partial1"); ...

jqueryhtmlajaxmodel-view-controllerpartial-views

Tips for making a background image responsive using ng-style in AngularJS

Can anyone assist me in fixing the gap space issue in a responsive view with an attached jpg background image? Follow this link for more details: enter image description here ...

angularjshtmlcssbackground

PHP code in Wordpress incorporating an Ajax request

Does anyone know how to fetch user data as a string using ajax in WordPress? I think I understand the basic concept PHP This code goes in my functions.php file add_action('template_redirect', 'edit_user_concept'); function edit ...

javascriptphpjqueryhtmlwordpress

Is it possible to apply varying CSS styles depending on the parent element's class?

Apologies for the poorly worded question, but I am struggling to find the right terms to convey my query. Let me attempt to explain... Is it feasible to apply different css styles based on the classes assigned to the containing element? For example: < ...

htmlcss