Display text with a hover effect

When I hover over an image, I want to display some text. I managed to make it work, but the text was expanding the size of the card. To solve this issue, I added a display none to the text class.

I can't include all the code here, so here's a snippet from jsfiddle for reference: https://jsfiddle.net/Minirock/fgs7o2Lv/1/. The text I want to show is located under FORUM 1 and FORUM 2 in the fiddle example.

If you need further clarification on what's going wrong, please let me know. Below is the HTML code snippet:

<div class="card-body">
    <div class="forum_title">FORUM 1</div>
    <div class="row">
        <div class="col-lg-8 category">
            <div class="card card-chart image1">
                <img src="http://lorempixel.com/500/150/nature/" alt="avatar_monde" class="img_monde" />
                    <div class="middle">
                        <div class="text">Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum.</div>
                    </div>
            </div>
        </div>

        <div class="col-lg-2 category">
            <div class="card card-chart detail">
                NOM SUJET
                <br/>
                NOM POSTEUR
                <br/>
                HEURE
                <br/>
                <a href="#"> > LIRE LE DERNIER MESSAGE</a>
            </div>
        </div>
    </div>
</div>
htmlcssbootstrap-4

Answer â„–1

substitute 

.text{
    display: none;
}

with the following (and it should function seamlessly)

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

Answer â„–2

There was a time when I encountered a similar issue, but I found a simple solution. Why not try this?

.text{
    display:none;
}

.image1:hover .middle,
.image2:hover .middle,
.image3:hover .middle ,
.image4:hover .middle ,
.image5:hover .middle ,
.image6:hover .middle ,
.image7:hover .middle ,
.image8:hover .middle ,
.image9:hover .middle ,
.image10:hover .middle ,
.image11:hover .middle ,
.image12:hover .middle ,
.image13:hover .middle ,
.image14:hover .middle ,
.image15:hover .middle 
{
     opacity: 1;
     display:block;
}

Remember that the text class should be within the same div as the images.

Answer â„–3

If you want to achieve this effect, you can easily do so using jQuery with the onmouseover event.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.img_monde').on('mouseover', function(){
   $('.text').css('display', 'inline');
})
</script>
This script listens for a mouseover event on the specific image with the class "img_monde" and changes the display property of the div with the class "text" to inline when that event occurs.

Answer â„–4

Experiment with applying your personal touch to the middle of the division element.

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

Avoiding page refresh while submitting a form can be tricky, as both e.preventDefault() and using a hidden iFrame seem

I've been stuck on this issue for a while now, scouring Stack Overflow and Google for solutions, but nothing seems to be working. My main goal is to avoid page reloads after uploading a file because it resets the dynamic HTML I need to display afterwa ...

javascripthtml

Adding a certain number of days to a date within an existing ng-module in AngularJS

Hey everyone, I'm new to using AngularJS and I am currently attempting to incorporate one ng-module value into another ng-module date input within AngularJS. For example: if the date is 17-08-2016 and we add 20 days, the expected result should be 03-0 ...

htmlcssangularjsmeanjs

How do I apply a xPage page style using the styleClass attribute instead of directly using the style attribute

Would like to know how to change the background color of an entire page using styleClass instead of directly in the xp:view tag? Here's an example that works: <xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="background-color:#f1f1f1;"> ...

cssxpageslotus-notes

Utilizing jQuery to Record the Status of HTML5 Forms

Can jQuery be used to track the status of an HTML5 form element? For instance, if a user enters an invalid email address in the email field, can jQuery detect this event and take action such as disabling the submit button until a valid email is entered? ...

jqueryhtml

Having Trouble with Bootstrap 4: "Encountering Uncaught Error: Tooltip Transition in Progress"

I'm currently utilizing Bootstrap 4 on my website and incorporating the Tooltip feature. While my JavaScript appears to be correctly formatted, there are instances where I encounter errors in Console. My Javascript Setup | Bootstrap 4 <script src ...

javascriptjqueryhtmlcsstwitter-bootstrap

Allow the button to be clicked only when both options from the 1/3 + 1/3 radio buttons are selected

How can I ensure that the next <button> at the bottom of the HTML is only clickable when at least one of each <input type="radio"> is checked? Also, how do I integrate this with my current function? The button itself triggers a jQuery function ...

javascriptjqueryhtmljson

What is the process for setting the <script src> to include a javascript file located outside the root folder specified in express.static()?

After setting app.use(express.static('public')), and with the folder structure shown below including my starting express from the parent folder of package.json: ├── package.json ├── public │   ├── favicon.ico │   ├─â ...

htmlnode.jsexpresspath

Using jQuery to choose options and change the background color

Hey there, I have a select box below: <select id="events"> <option value="1" style="background-color:green;">Event 1</option> <option value="2" style="background-color:yellow;">Event 2</option> <option value="3 ...

javascriptjqueryhtmlselect

What is the procedure for selecting an element based on its child containing specifically filtered text?

Imagine a webpage with the following elements: <div data-search="type1"> any HTML <!-- .click is a child of any level --> <span class="click" data-source="page1.html">blue</span> <!-- let's call it "click1 ...

javascriptjqueryhtmlajaxregex

Tips for indicating an error when an array contains empty values

Object = { 0 : { NAME: 'A' , PET :'DOG' , AGE : 'NINE' }, 1 : { NAME: 'B' , PET :'CAT' , AGE : 'TEN' }, 2 : { NAME: 'C' , PET :'TURTLE' , AGE : '' } } HT ...

javascripthtmlarraysangularjsdropdown

Using ReactJS to search for and replace strings within an array

A feature of my tool enables users to input a string into a textfield and then checks if any words in the input match with a predetermined array. If the user's string contains a specific name from the array, I aim to replace it with a hyperlink. I&a ...

javascripthtmlnode.jsreactjsjavascript-objects

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

I am looking to dynamically display a form field based on the selected value from a dropdown list. For instance, if 'first' is chosen in the dropdown list, I want the form to remain unchanged. However, if 'two' is selected in the drop ...

javascripthtmlangularformstypescript

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...

javascripthtmlcssangularjs

Switching List Icons when Hovering over Dropdown

Newbie Inquiry: I am working on a dropdown list featuring 10 items, each with black icons aligned to the right. I want to switch these icons to white when hovering over them. Appreciate any tips you may have! Thanks in advance! ...

jquerycssdrop-down-menuhovericons

Angular JS integration for optimal Bootstrap grid alignment

Recently, I have been exploring the Bootstrap framework and experimenting with grid alignment. When working with 4 columns, W3 schools recommends using the following row setup: <div class="row"> <div class="col-lg-3"> </div> ...

javascripthtmlcssangularjstwitter-bootstrap

My webpage lacks responsiveness

I've recently put together an HTML page, but unfortunately, it's not responsive. My Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...

htmlcss

Can you identify the missing piece in my design?

#container { width: 250px; margin: 0 auto; } .group { border: 1px solid grey; margin-bottom: 20px; } .group p { text-align: center; font-family: Helvetica sans-serif; font-size: 25px; color: #2e3d49; } .group img{ wid ...

htmlcssimage

I'm puzzled as to why a scroll bar materializes

I recently encountered an interesting issue while working on my responsive web design project. Upon resizing the browser to a width of 615px or less, a horizontal scroll bar unexpectedly appeared. It's puzzling as to which element is causing this prob ...

cssscrollbarresponsive-designhorizontal-scrolling

Instructions for creating a Google Maps overlay that hovers above the zoom bar

Let me share my workaround for creating an overlay and dealing with z-index issues when using Google Maps API. The problem arises when dragging the map and the overlay ends up behind control elements like the zoom bar. No matter how much I adjust the z-ind ...

cssgoogle-maps-api-3

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss