Hover over the text to reveal its content

I am currently in the process of developing a website that features interactive images with text appearing when hovered over. This concept is inspired by the functionality on the nowthisnews.com site.

Despite my efforts, I have been unable to get this feature working correctly.

Here is a portion of the code that I have implemented so far:

#facebook-menu {
    display: none;
}

#facebook {
    cursor: pointer;
}

#facebook:hover + #facebook-menu {
    display: block;
}
<footer>
  <div id="footer"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1 text-center">
        <br>
        <ul class="list-inline">
          <div class="hover">
            <img href="" id="facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" height="39px" width="39px"></div>
        </ul>
      </div>
    </div>
  </div>

  <div id="facebook-menu">
    <font size=5><b>Geeky Pixel</b>
              <br><font size=2>
              Get all news and updates directly to your Facebook feed.<font size=5>

If anyone can offer insight into where I may be making errors, I would greatly appreciate it.

Thank you

Please keep in mind that coding is not my area of expertise, so there are likely mistakes present here.

htmlcss

Answer №1

There was a markup issue that needed to be addressed. To properly use +, the element #facebook-menu should be a sibling of #facebook. I have cleaned up the markup accordingly.

The revised code below should function as expected:

  #facebook-menu {
    display: none;
  }
  
  #facebook {
    cursor: pointer;
  }
  
  #facebook:hover + #facebook-menu {
    display: block;
  }
<footer>
  <div id="footer"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1 text-center">
       
            <img href="" id="facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" height="39px" width="39px">

            <div id="facebook-menu">
                <b>Geeky Pixel</b>
                <p>Get all news and updates directly to your Facebook feed.</p>
            </div>

      </div>
    </div>
  </div>
</footer>

Answer №2

With a more polished execution using JQuery, some may argue that JQuery is unnecessary for hover effects. However, utilizing JS provides superior cross-browser consistency and offers a wider range of options.

$('#facebook').mouseenter(function()
{$('#facebook-menu').removeClass('puffOut').addClass('puffIn magictime');});

$('#facebook-menu').mouseleave(function()
{$('#facebook-   menu').removeClass('puffIn').addClass('puffOut');});

I opted to use JQuery over plain JS due to certain buggy behaviors when manipulating classes directly with JS.

Check out the pen here:

http://codepen.io/damianocel/pen/YWaWJE

I have made adjustments to your CSS and introduced some keyframe animations for added flair.

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

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

Ways to design siblings that are not currently being hovered over

Is there a way to achieve an effect where hovering over one list item causes all other list items to fade out? I'm searching for a method to style an element that is not being hovered, when one of its siblings is in the hovered state. I've trie ...

htmlcss

Commence the 10-second Redirect Timer

I implemented a page that automatically redirects the user after 10 seconds using the following code snippet. <META HTTP-EQUIV="refresh" CONTENT="10;URL=login.php"> Now, I have this PHP code that I want to display dynamically counting down from 10 ...

phphtmlhttp-redirect

MUI Typography - Text turns white when hovered over

I've created a customized component that turns green on hover. Here's the code for it: const ProjectAdd= styled.div` background-color: white; list-style-type: none; list-style: none; height: 100%; width: 10%; height: 100%; border-ra ...

cssreactjsmaterial-ui

Modifying the color scheme of the table background and text

After finding a code example online to assist with creating a table in my project, I am faced with the challenge of changing the background color of the white rows to match the dark blue used for others. Additionally, I cannot figure out how to change the ...

htmlcsshtml-table

What is the best way to extract data from dynamically generated radio buttons?

UPDATE I previously attempted the recommended adjustments in the initial response, but encountered issues with radio buttons allowing multiple selections and the label number controlling the top radio button. Subsequently, I have experimented further...I w ...

htmljqueryasp.net-corerazor-pages

There appears to be an issue with reading the property 'toLowerCase' of an undefined element, and I'm having trouble identifying the error

The variables I have initialized (globally): var audio; var LANGUAGE; var audioArray; var MEDIAARRAY; var WORDS; var SOUNDARRAY; This specific line is causing the error: var audioId = MEDIAARRAY.audio.lowercase.indexOf(exObject['exerciseGetWordInpu ...

javascriptjqueryhtmlajax

Adding and removing/hiding tab-panels in Angular 4 with PrimeNg: A step-by-step guide

I'm currently working on a tabView project with a list of tab-panels. However, I am struggling to find a way to dynamically hide and unhide one of the tab panels based on specific runtime conditions. Does anyone have any suggestions or insights on how ...

htmlangulartypescriptprimeng

Align list items vertically, even when they have varying heights

I am currently working on creating rows of images, with 3 images in each row. The data being used is dynamic, however, I have provided some sample HTML and CSS below: ul { margin: 0; padding: 0; list-style: none; width: 900px; } li { margin: 0; padding: ...

htmlcss

css webpack react component not displaying background images

I'm facing an issue where I can't seem to get the image to display as a background. If I just attach the image directly, it shows up without any problems. However, my intention is to make it a background image so that I can overlay text on top of ...

javascriptcssreactjssass

"Manipulating a drop-down menu in HTML with data from a MySQL database using PHP

Hello there, I could use some assistance. I am working on a straightforward web application and require help with a specific task. Here's the scenario: I have an HTML form with a single combo box. I would like to populate this combo box with data fro ...

phphtmlmysqlforms

Should the text underneath the image be placed above the rest of the images?

In the process of developing my game, I encountered a challenge where text needs to be dragged under specific images. To achieve this, I envision creating tabs below the images for the text to be dragged onto. My initial approach involved wrapping each im ...

htmlcssimagetabs

Provide users with the option to select a specific destination for saving their file

In the midst of my spring MVC project, I find myself in need of implementing a file path chooser for users. The goal is to allow users to select a specific location where they can save their files, such as C:\testlocation\sublocation... Despite r ...

javascripthtmljspspring-mvcdownload

Ways to customize the appearance of a search box

I am looking to revamp the appearance of a search bar that currently looks like this: <div class="searchbase input-group animated trans" id="searchbase"> <input type="text" placeholder="<?php _e(_l('Searching...'));?>" class=" ...

phpcsssearch

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...

cssangularforms

The feature of Switch css does not appear to function properly when used in conjunction with input type

Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue? @charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #4a4a4 ...

htmlcssinputchecked

Mobile-style menu with full desktop height

I am currently working on developing my first custom WordPress theme from scratch. My goal is to design a mobile-style menu that can also be displayed on desktop screens. To achieve this, I have used jQuery to implement the sliding effect. You can view a ...

jqueryhtmlcsswordpress

What is the method to ensure span elements wrap text without setting a specific width or maximum width on the parent div?

Here is a snippet of code I have generated for displaying warnings or errors in Dojo dialogs: /* Relevant CSS styles */ .l-status-message-wrapper { height: auto; margin-left: 5px; margin-top: 2px; min-height: 15px; } .l-status-message-w ...

htmlcss

Issue with interactive rows in a table ( Rails Version 4 )

I am encountering an issue with a table that is linked to a customer show page _table.html.erb <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th width="50"><%= sort_link ...

htmlcssruby-on-rails

Tips for specifying headings for a particular div ID

I'm attempting to customize the font-family of the headings within my header section differently from the headings located elsewhere on the webpage. Unfortunately, I am encountering difficulties in ensuring that this style change only affects the spec ...

cssstylesheethtml-heading