Create a `div` element that transforms into a box when hovered over and displays text

Sorry for repeating a common question, but I'm struggling with CSS and need some help. I am new to this, so any assistance is greatly appreciated.

I want to display 14 "element boxes" each with their own background, etc. When hovered over, I would like them to show a bit of text. However, the issue is that the div appears below an iframe object that spans from top to bottom.

http://pastebin.com/WmbPZ3AV

I have created an image showing what I currently have and what I am aiming for, which may make it easier to understand.

https://gyazo.com/cbd9d293b05233aba331731bcbfa81a8 I have completed parts 1 & 2. Could someone please help me create the 3rd part? :)

htmlcss

Answer №1

It's important to start a CSS class name with a character and remember to use display : inline-block; when you want to set a fixed width.

Here is an example of code:

 
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="My project on Australia.">
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <style>
 
    html {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
            iframe {
              float:left;
               clear:left;
            }    
           
            .test {
               width: 150px;
               height: 150px;
               margin: auto;
               border-spacing: 15px;
               border-style: ridge;
              float:left;
            }    
 
.showme{
display: none;
}
.showhim:hover .showme{
display : inline-block;
}
 
.row:hover .select{
    display: block
}
 
.select{
    display: none;
}
    </style>
    </head>
    <body>
<iframe src="links.html" width="200" height="1000px"></iframe>
        <div class="test showhim">Hover over me <div class="1 showme">Hi </div></div> </body>
</html>

There's always more to explore in the world of CSS and 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

I am puzzled by the fact that the center cell of my table is longer than the surrounding cells

I'm currently working on a project that involves creating a webpage. I have a table, and when I execute the code, I notice that the center cell appears longer than the rest of the cells. table,td,tr{border: 1px solid red; } <!document html> ...

htmlcss

Tips for incorporating personalized form and input directives in AngularJS while addressing issues with transcluded scope

Over the last few days, I attempted to implement something along these lines: %myform(name='somename' ng-controller='whatever') %myinput(ng-model='user.firstName' ... The controller has a user structure with firstName, l ...

javascripthtmlangularjsformshaml

Implementing a universal (click) attribute for Angular 2 in CSS

When using Angular 1, it was as easy as following this syntax: [ngClick], [data-ng-click], [x-ng-click] { cursor: pointer; } This snippet ensured that any tags with the ng-click attribute displayed a pointer cursor. How can we achieve the same effect ...

htmlcssangularjsangular

Verify whether the value is in the negative range and implement CSS styling in React JS

I have been developing a ReactJS website where I utilize Axios to fetch prices from an API. After successfully implementing this feature, I am now looking for a way to visually indicate if the 24-hour change percentage is positive by showing it in green, a ...

htmlcssreactjs

Incorporating an icon into a Bootstrap tab

I have encountered a minor issue while trying to include an icon in a bootstrap tab, resulting in some styling problems. In need of a CSS resolution that satisfies the following criteria: The icon must be aligned to the right of the link. The icon canno ...

htmlcsstwitter-bootstrap

What is the process for using javascript to close the existing tab?

I'm trying to figure out how to close the current tab using JavaScript, but I haven't been able to find a solution. I've searched all over the internet and some posts suggest the following code: $("#click").click("click", function(element) ...

javascriptjqueryhtml

Intersecting table columns with a different data table

My task is to create a table with a column that contains another table, where I want the colors of each alternating row to be different. Please refer to the image below (ignore the "CharacterAgain" column). Below is an example of AngularJS code for the ta ...

htmlcssangularjshtml-table

Trouble arises when attempting to convert HTML into a PDF format

Currently, I am developing a billing application using Sails.js, Angular, and ejs. Everything is going smoothly, but now I have a pressing need to save the HTML invoice as a PDF. After hours of searching on npmjs, I came across the html-pdf package. It wa ...

htmlpdfnpmsails.js

Using PHP's explode function to convert JSON output into an array

Hello, I received a JSON output from an API which contains information about pet adoption. The data includes details like the adoption process and personality of the animals. {"listings":[{"adoption_fee":"$200","adoption_process":"For cats, please fill ou ...

phphtmljsondecodeexplode

How can I position a Bootstrap dropdown textbox or menu directly beneath its button?

Currently, I am working on implementing a simple dropdown textbox for a button within a navbar. However, I am encountering an issue where the text does not drop below the button as expected. Initially, it was displaying to the left, obstructing the brand l ...

csshtmltwitter-bootstrap-3

Using JavaScript to submit a form once selections are made from various dropdown menus

My HTML Code <form action="processForm.html" method="post"> <label for="InputOne">Input One</label> <select id="InputOne"> <option val="1">Item</option> <option val="2">Item</option> ...

javascriptjqueryhtmlforms

What is the best way to provide two unique versions of websites using one domain?

I've embarked on a project that requires a complete rewrite. Instead of opting for a big bang release, we've decided to utilize the Strangler Pattern as outlined here. The current application (details below) will continue to run unchanged under ...

javascripthtmlreactjsnginxarchitecture

Separate the string by using a comma to create new lines

I'm trying to figure out how to split a string by commas and create new lines. I tried using the split and join functions, but it's only removing the commas without actually creating new lines. string='Lorem Ipsum,Lorem Ipsum,Lorem Ipsum&ap ...

javascripthtmlangular

Guide on displaying gallery images when clicking on a specific class

I am in the process of developing a gallery tab for a website, initially displaying three thumbnails. The goal is to reveal the remaining thumbnails when a class named show-all is clicked. I have successfully animated the gallery's height to show the ...

javascriptjqueryhtmlcss

error occurred while trying to upload a file

I am encountering an issue while trying to upload a file using PHP. Here is the HTML code snippet: <form enctype="multipart/form-data" id="form" action="action.php"> <input type="file" name="file"/><br/><br/> <input type ...

phphtml

Is there a way to eliminate the slight blurriness of images in a web browser?

I am developing a game where collisions are determined by the color of pixels on the canvas. If a pixel is red, the player cannot move. However, I have encountered an issue in Firefox where images appear blurred and pixels transition smoothly from white ...

htmlimagefirefoxcanvas

Unable to center div container with margin set to auto

I'm struggling to center my container on the website. My goal is to have it centered and take up about 80% of the page so I can incorporate an image slider and text inside. Using margin: 0 auto doesn't seem to be achieving what I want. The backgr ...

jquerycsshtmlweb

Why is there space between two divs if there are no `margin`, `padding`, or `border` properties set?

Using vue.js, I created a page called index.vue which includes the components header.vue and home.vue: The code for index.vue: <template> <div class="index"> <i-header></i-header> <router-view></router-view> ...

cssvue.js

Adding a div beside an input element - step by step guide

When creating an input field in my code, I followed these steps: var inputVal = document.createElement("input"); inputVal.setAttribute("type", "checkbox"); inputChek.onchange = select; inputChek.setAttribute("value", title); //inputChek.after(sortDiv); ...

javascripthtmlcss

Update issue detected with radio buttons in jQuery

Trying to get radio buttons in my code to update like other variables on the web page when their state changes. HTML <TD><Input id="radOn2" name="Nb_var86" type= "radio" Value=1 onClick="this.form.submit();">ON</TD> <TD><Input ...

jqueryhtmlajax