I am interested in showcasing a card when it is hovered over

I am having trouble with a hover effect to display a hidden card. I have two div elements, one is labeled single-album and the other hide. I used the + selector to set the hide div to display none initially, but the hover effect is not working as expected.

<div class="row">
        <div class="col-12">
          <!-- Single Album -->
          <div class="single-album">
            <img src="img/book-imgs/DH.jpg" alt="">
            <div class="album-info">
              <a href="#">
                <h5>HORROR</h5>
              </a>
              <p>Dark House</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row hide">
        <div class="col-lg-12">
          <div class="card mb-3" style="max-width: 540px;height:240px">
            <div class="row g-0">
              <div class="col-md-4">
                <img src="img/book-imgs/NHrt.jpg" class="img-fluid rounded-start" alt="...">
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">NHRT</h5>
                  <p class="card-text">This is a wider card with supporting text below as a lead-in to additional content. This content is a little bit longer.
                    </p>
                    <button class="ba-btn">Download</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
htmlcsscss-selectorsmousehoveronhover

Answer №1

Here is a code snippet that might be useful for your project:

#content-item {
    width: 100%;
    overflow: hidden;
    margin: 30px 0;
}
#content-item .item{
    height: 60vh;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    margin-top:30px;
    display: flex;    
}
#content-item .item img {
    height:100vh;
    width: 500vh;
    opacity: .66;
}
#content-item .item:hover img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity:1;
}
#content-item .item .caption {
    position: absolute;
    bottom: -50px;
    margin-left: 10px;
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
#content-item .item .caption h2 {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}
#content-item .item .caption p {
    margin: 0;
    color: #fff;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}
#content-item .item:hover .caption {
    opacity: 1;
    bottom: 10px;
}

Feel free to use it in your HTML/CSS code structure.

Answer №2

The JavaScript code above will set up event listeners for mouseover and mouseout on the .single-album element, to control the visibility of the .hide element. Remember to replace any placeholder text or image sources with your actual content.

document.addEventListener("DOMContentLoaded", function() {
      const singleAlbum = document.querySelector('.single-album');
      const hideElement = document.querySelector('.hide');

      singleAlbum.addEventListener('mouseover', function() {
        hideElement.style.display = 'block';
      });

      singleAlbum.addEventListener('mouseout', function() {
        hideElement.style.display = 'none';
      });
    });
.hide {
      display: none;
    }
<div class="row">
  <div class="col-12">
    <!-- Single Album -->
    <div class="single-album">
      <img src="img/book-imgs/DH.jpg" alt="">
      <div class="album-info">
        <a href="#">
          <h5>HORROR</h5>
        </a>
        <p>Dark House</p>
      </div>
    </div>
  </div>
</div>

<div class="row hide">
  <div class="col-lg-12">
    <div class="card mb-3" style="max-width: 540px;height:240px">
      <div class="row g-0">
        <div class="col-md-4">
          <img src="img/book-imgs/NHrt.jpg" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">NHRT</h5>
            <p class="card-text">This is a wider card with supporting text below as a lead-in to additional content. This content is a little bit longer.</p>
            <button class="ba-btn">Download</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

If this solution meets your needs, you can check it out on CodePen

#content-item {
    width: 100%;
    overflow: hidden;
    margin: 30px 0;
}
#content-item .item{
    height: 60vh;
    overflow: hidden;
    cursor: pointer;
    background: #000;
  margin-top:30px;
  display: flex;    
}
#content-item .item img {
    height:100vh;
  width: 500vh;
    opacity: .66;
}
#content-item .item:hover img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity:1;
}
#content-item .item .caption {
    position: absolute;
    bottom: -50px;
    margin-left: 10px;
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
#content-item .item .caption h2 {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}
#content-item .item .caption p {
    margin: 0;
    color: #fff;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}
#content-item .item:hover .caption {
    opacity: 1;
    bottom: 10px;
}
<html>
<head>
    <title>Hover Images</title>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,700italic' rel='stylesheet' type='text/css'>
</head>
<body>

</body>
<div class="container">
    <div class="row">
        <div id="content-item">
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm2.staticflickr.com/1131/1473713101_1c1804182a_z.jpg?zz=1">
                    <div class="caption">
                        <h2>HORROR</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm1.staticflickr.com/153/360701437_4e4979d164_z.jpg">
                    <div class="caption">
                        <h2>Horror</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="item">
                    <img src="https://farm9.staticflickr.com/8246/8504604638_b55d38a34c_z.jpg">
                    <div class="caption">
                        <h2>HORROR</h2>
                        <p>Dark House</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</html>

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

Overlay one image on top of another

Recently, I've been working on this code snippet. I am attempting to center the profile picture even when the screen width is reduced. The issue lies with using position:absolute, preventing margins:auto from functioning properly. As a workaround, I ...

htmlcssmaterialize

IIS Alert: Missing Images, CSS, and Scripts!

When I tried to publish my website using IIS, I encountered the error message Cannot read configuration file due to insufficient permissions. After attempting to add permissions for IIS_USRS and realizing that this user does not exist on my computer runnin ...

javascriptcssimageiisvisual-studio-2012

Choosing a Radio Button with a Labeled Option

I'm experimenting with a method to style radio buttons by concealing them and inserting an alternative image as the background of the corresponding label (similar to this technique). In my test, I attempted to apply CSS to the radio button label: inp ...

htmlruby-on-railscssradio-button

Using JavaScript, insert a new date row onto a JSP page

When I click on a hyperlink, I want to add a new row to a jsp page. The functionality is working correctly, but the date function class="dateTxt" is not functioning in the new row. Below are the details of the javascript and jsp function. Javascript: fun ...

javascriptjqueryhtmljsp

Struggling with using flexboxes and creating animated elements

Seeking assistance with animating the search bar on a website project. The animation is functioning, but the search input abruptly moves when the animation starts, as shown in this GIF: I am utilizing jQuery for the animation because I also want to implem ...

javascriptjquerycssanimationflexbox

Is it common for functions to be outlined in standard CSS practices?

I am curious if the CSS standard includes definitions for "functions"; I have not come across any information about them on w3schools or other sources. When I refer to "functions," I am talking about calls such as rgb(int, int, int) or url(string) that ar ...

csssyntaxsemantics

How can I dynamically change the orderBy parameter based on conditions in an Angular application?

I need to dynamically change the orderBy parameter in a table row based on the result of a method. Here is an example of my current tr setup - <tr class="pl" ng-repeat="thing in things | orderBy:'oldId':reverse" ng-class="{'row-error&apo ...

javascripthtmlangularjs

Webpage expands its reach beyond the confines of the HTML element

I've recently added a background gradient to my webpage to make it easier on the eyes, but now I've noticed that the page extends past the <html> element and continues scrolling. This also causes the background gradient to repeat below the ...

htmlcss

"Exploring the concept of master pages in web development with the combination

Recently, I have been developing a website that functions similarly to olx, displaying ads based on the visitor's location (for example, showing Mumbai ads if the visitor is from Mumbai). Initially, I was planning to create separate pages for each cit ...

javascriptphphtmlcssmaster-pages

What is the best way to enclose a block of content with <div> and </div> tags using the append() function?

My goal is to add an outer div container by first appending it, then adding content, and finally appending the closing tag. However, I'm encountering an issue where the div I added at the beginning automatically closes itself, resulting in two separat ...

javascriptjqueryhtml

Guide to incorporating a logo into a personalized WordPress theme

In the process of creating a WordPress theme from scratch, I've hit a roadblock while trying to incorporate a logo in the top left corner of the page where the title would normally be displayed. <h1> <a href="<?php echo home_url(); ?> ...

phphtmlcsswordpresswordpress-theming

Does the content='text/html; charset=gb2312' html meta tag attribute impact the GET Query String?

Here's the question: When making a standard HTTP Request to a server (non-ajax), does the Query String passed by the GET method to the server get affected by the encoding specified in this meta tag: <meta http-equiv='Content-Type' conte ...

javahtmlhttpcharacter-encodingurl-encoding

updateStatusCallback function is not defined in the Facebook example using jQuery

I've been trying to incorporate Facebook integration into my HTML code, specifically adding features like Facebook login and sharing functionalities. However, I've hit a roadblock in the process. Even after searching extensively for solutions, I ...

javascriptjqueryhtmlajaxfacebook

The transition effect for the box shadow is being altered to modify the dimensions

--- UPDATE 2 ---- Here is a different example video showcasing the bizarre behavior of my react application. I am struggling to identify the root cause of this issue. See the issue in action I have a div with the class name side-btn It contains an anim ...

cssreactjs

The execution of the function halts as soon as the player emerges victorious

In my attempt to create a basic game where players compete to click their designated button faster to reach 100%, I am in need of assistance with implementing a logic that determines the winner once one player reaches or exceeds 100. Essentially, I want ...

javascripthtml

Issue with function operation

Incorporating HTML code with Angular elements on the homepage of a PHP forum script has been challenging. I have inserted the PHP code into index.template.php as instructed, but unfortunately, nothing is being displayed. <?php /** * This function ...

phphtmlangularjs

Resetting the check status in html can be accomplished by using the checked

I am currently working on a popup feature in HTML <div id="term_flags" class="term_flags"> <div class="modal-users-content flagsContent"> <div class="modal-users-header"> <span class="close" ng-clic ...

htmlangularjs

The issue with displaying inline block is that the divs are not appearing side by side on the

Two of my div elements, namely form-panel and data-panel, are currently not aligned on the same line. How can I use display:inline-block to align them in a single line? Please review the code provided below. I have already used display:inline-block on both ...

javascripthtmlcss

Error code 2 in Phonegap 2.2.0 iOS file transfer issue

saricsarda2[326:15b03] Executing multiple tasks -> Device: YES, App: YES saricsarda2[326:15b03] -[CDVFileTransfer download:] [Line 313] File Transfer is currently downloading... saricsarda2[326:15b03] File Transfer has been completed with response code ...

iosxcodehtmlcordova

I've encountered an issue with adjusting certain property values for an SVG component within my React project

I'm experiencing an issue where the pointer property is working, but the fill property isn't having any effect. When I inspect the elements in the browser console, I can manually change the element.style to affect the styling of the SVG component ...

cssreactjssvg