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

What is the method to run a script within a particular div?

Here is an example of the DOM structure: <div> <button>Click me</button> <img src=#> </div> <div> <button>Click me</button> <img src=#> </div> <div> <button>Clic ...

javascriptjqueryhtmldom

Incorporate a vibrant red circle within a tab of the navigation bar

I'm looking to incorporate a red dot with a number into a messaging tab to indicate new messages. Below is the HTML code: <ul class="nav pw-nav pw-nav--horizontal"> <li class="nav-item"> <a class="nav ...

javascripthtmlangulartypescriptangular6

My attempt to use the Redux method for displaying data in my testing environment has not yielded

I've been attempting to showcase the data in a Redux-friendly manner. When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected. For this purpose, I implemented the ...

javascripthtmlcssreactjsredux

Tips for creating responsive emails

Yesterday, I posted about my email newsletter and received some helpful feedback on creating a good structure. I implemented the suggestions provided into my newsletter and also added media query code to make layout adjustments for supported email clients. ...

htmlcssmedia-querieshtml-email

When utilizing jQuery's .on() method, sometimes the data being passed to the handler may appear

I have three anchor tags that are dynamically added from an ajax $.get() response. Whenever one of them is clicked, I want to trigger a second request. The parameters for the second request should be set based on the global data attributes in these an ...

jqueryhtmlajax

Deactivate button using Javascript

Can anyone assist me with this issue I am having? I currently have a button set up as follows: <input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/> I need to disable the button using jQuery, standard javascript ...

javascriptjqueryhtmlcssdojo

Having trouble drawing over buttons in HTML5 Canvas?

window.addEventListener("load", () => { const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); const color = document.querySelector("#color"); const strokeWeight = document.querySelector("#strokeWeight"); ...

javascripthtmlcss

Merging ng-if conditions

I would like to find a way for my two ng-if conditions to work together instead of separately. I want to display only the last one if both are true. Currently, this is how my code looks: <div> <img ng-src="{{img(myColor)}}" ng-if="myColor" ...

htmlangularjsuser-interfaceng-showangular-ng-if

What is the most effective method for digitally collecting a signature?

Currently, I am in the process of developing a website application using PHP that demands a signature from the user. This particular section of the website will only be accessible on Windows-based tablets. Hence, my inquiry is as follows: What method wo ...

phpflashhtmlcanvastablet

Trigger the phone to vibrate once the animation has completed. This feature will only activate upon clicking the button

After the image completes its animation by sliding in from the left, I would like it to vibrate for 2 seconds using the HTML 5 vibrate API: navigator.vibrate(2000); An on-click event successfully triggers the vibration when a button is clicked: <butt ...

jquerycsscss-animationsanimate.css

Incorporating Bootstrap Content: A Guide to Including a PHP File within Another PHP File

I am encountering an issue when trying to import a PHP file containing my navigation bar into another PHP file. Here's the code for the navigation file: <?php echo " <html> <head> <nav class = "navbar navbar-default navbar-fixed-top ...

phpjqueryhtmlcss

Incorporating fresh data from a node.js backend to refresh a webpage section

I'm currently working on creating an app that can retrieve the song a user is currently listening to using a web scraper. While I've managed to direct users to the page and display the current song title, they must manually refresh the entire pag ...

htmlcssnode.jsexpressejs

CSS for a Dropdown Menu with Multiple Layers

I've successfully implemented a dropdown menu, but now I'm facing the challenge of adding another level to it. Specifically, I want a second level to drop down when hovering over "Test3". What do I need to add or modify in the code to achieve thi ...

htmlcss

Can one utilize Javascript to write in plain text format?

Currently, using JavaScript I have a plain text containing data that is displayed within my form tags. Everything is functioning correctly, but now I need to update the values inside the code of my form tags in order for the changes to also be reflected in ...

javascriptjqueryhtmlcssdns

Is there a way to produce random colors using this SCSS function?

The current function is returning an output in the color #ff0063, but my goal is to create a variety of colorful pixel dots on the screen. Could someone provide an explanation of what this code is doing? @function multiple-box-shadow ($n) { $value: &apos ...

htmljquerycsssass

A common inquiry: how can one pinpoint a location within an irregular figure?

I have been studying Html5 Canvas for a few weeks now, and the challenge mentioned above has puzzled me for quite some time. An irregular shape could be a circle, rectangle, ellipse, polygon, or a path constructed by various lines and bezier curves... I ...

javascripthtmlcanvas

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

I need help optimizing my HTML page that includes certain sections with large Javascript files and images, which are initially hidden. Even when set to "display: none," the browser still loads all the content. One solution could be moving those sections in ...

javascriptjqueryhtmlajax

Unusual Behavior of CSS and JQuery Selectors

As I was working with jquery selectors, I encountered something quite unexpected. This is an example of my HTML: <ul id="unordered-list"> <li> <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/> ...

jquerycssjquery-selectorscss-selectors

The functionality of jquery.load() seems to be experiencing issues in Internet Explorer when attempting to load an HTML file

Code $('.form').load('http://'+window.location.hostname+':8423/html/form/form_generate.html/?session='+session); In an attempt to load a html file from a different port on the same server. The original server is accessible ...

javascriptjqueryhtml

unable to decrease the dimensions of the image within the next/image component

Why won't the image size change? I've attempted to adjust the width and height in the component and also tried styling with className, but no luck. The image only seems to resize when using a regular img tag. Here is my code: function Header() ...

cssreactjsnext.jstailwind-css