Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add text in the body. How can I achieve this using JS or CSS? Should I consider using

element.getElementsByClassName(classname)

and then apply CSS?

Here are details from devtools:

<head>
  <base href="/home/">
  <title>TITLE</title>
  <meta name="description" content="BLA BLA BLA">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="site-id" content="19750">
  <meta name="site-path" content="/home">
  <meta name="site-update-url" content="https://node.sv-cdn.com/notifications">
  <link rel="icon" type="image/png" href="/favicon.png">
  
  <link rel="stylesheet" media="all" href="//smallvictories-production-assets.s3.amazonaws.com/assets/feed-23dad8deef60c63dc6e181346844e7439ba4f76c25ed84e0fb8bd63d3ce2023f.css">
  <link rel="stylesheet" href="./_sv_custom.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
  <!--[if lt IE 9]>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
  <![endif]-->
<style>html.turbolinks-progress-bar::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  background-color: #0076ff;
  height: 3px;
  opacity: 0.99;
  width: 0%;
  transition: width 300ms ease-out, opacity 150ms ease-in;
  transform: translate3d(0,0,0);
}</style><link rel="stylesheet" type="text/css" href="chrome-extension://onhiacboedfinnofagfgoaanfedhmfab/dist/contentStyles.css"></head>
<body id="home" class="site-19750 page home feed" data-no-turbolink="">
  <div class="sv-loader" id="sv-loader"><div class="sv-loader-loading"></div></div>
  <div class="sv-theme">
    <div class="sv-feed">
  <div class="sv-feed-info" id="sv-feed-info" style="display: none;">
    <div class="sv-feed-info-inner">
      <h1 class="sv-feed-title sv-feed-info-title">WOLOBAN</h1>
      <div class="sv-feed-description sv-feed-info-description"><p>BLA BLA BLA</p></div>
    </div>
  </div>
  <a href="#sv-feed-info" class="sv-control sv-feed-control" data-sv-toggle="Info">Info</a>
  <div class="sv-feed-inner">
    <div class="sv-feed-block">
      <div class="sv-feed-meta">
        <h1 class="sv-feed-title sv-feed-meta-title">WOLOBAN</h1>
      </div>
    </div>
      <div class="sv-feed-item sv-feed-item-0 home 01photography jpg home01photographyjpg" id="svhome01photographyjpg">
    <div class="sv-feed-item-photo">
        <a target="_blank" href="/HOME/PHOTOGRAPHY">
            <img data-src="//aws.sv-cdn.com/site_assets/splash/3735baaa999/HOME/01-PHOTOGRAPHY.jpg" alt="01 PHOTOGRAPHY" class="lazyload lazy-loaded" src="//aws.sv-cdn.com/site_assets/splash/3735baaa999/HOME/01-PHOTOGRAPHY.jpg">
</a>        <div class="sv-feed-item-photo-caption"><p>Photography</p></div>
    </div>
</div>
      <div class="sv-feed-item sv-feed-item-1 home 02video jpg home02videojpg" id="svhome02videojpg">
    <div class="sv-feed-item-photo">
        <a target="_blank" href="/HOME/VIDEO">
            <img data-src="//aws.sv-cdn.com/site_assets/splash/3755baaa999/HOME/02-VIDEO.jpg" alt="02 VIDEO" class="lazyload lazy-loaded" src="//aws.sv-cdn.com/site_assets/splash/3755baaa999/HOME/02-VIDEO.jpg">
</a>        <div class="sv-feed-item-photo-caption"><p>Video</p></div>
    </div>
</div>
  </div>
</div>
  </div>

  <script src="//smallvictories-production-assets.s3.amazonaws.com/assets/feed-786a3a45375601be731dc81462c9dcf2bba435942bb0dbe9cd6bef8dd17bc5b5.js"></script>
  <script src="./_sv_custom.js"></script>
<span id="sbmarwbthv5"></span><a style="display: none; " id="exifview-absolute-url-convert-proxy" href="dummy"></a></body>

The sv-feed-item sv-feed-item-0 home 01photography jpg home01photographyjpg" id="svhome01photographyjpg refers to the picture where I would like to implement the hover text effect.

javascripthtmlcsshover

Answer №1

CSS styling example:

.sv-feed-item-photo > a:hover:before {
  position: relative;
  font-size: 40px;
  content: "Here is some sample text!";
  color: #000;
}

Answer №2

For all things JavaScript, look no further.

const imageContainer = document.querySelector('#svhome01photographyjpg');
imageContainer.appendChild('<div class="my-text-over-image">my unique text right here</div>');

Take a look at the accompanying CSS to style your text:

#svhome01photographyjpg {
   position: relative;
   ...
}

.my-text-over-image {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
}

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

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

javascripthtmlcssmenuhtml-lists

Cannot save PDF files to a server using jsPDF

I'm new to this community and still learning javascript & php. I am having trouble saving my PDFs with jsPDF to the local storage on the server (automatically generated). It used to work in the past, but now when I add Canvas (javascript) to my HTML, ...

javascriptphpajaxjspdf

Having difficulty receiving a response from an AJAX call within the success function

After browsing through this stack link Ajax response not calling success:function() when using jQuery 1.8.3, I'm puzzled as to why the success function is not invoked when I uncomment the dataType line. It seems that setting dataType = JSON prevents t ...

javascriptjqueryajax

Is your pure function component not receiving or responding to input props correctly?

Here is my code snippet: const actionCreators = { action: AppReducer.actionCreators.action } interface GlobalState { user: Model.User | null; } interface InputState { setStashBarWidth(width: number); stashWidth: number; } const Header = ...

javascriptreactjstypescriptreduxreact-redux

The toggle button appears to be lacking in CSS styling

I'm trying to create a dropdown button using Bootstrap and ng-bootstrap in my Angular project. Here's the HTML I've written: <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownBasic1" n ...

cssangulartwitter-bootstrap-3angular6ng-bootstrap

Hover over the image to reveal sliding text

I am attempting to incorporate a CSS3 hover effect into my images, where hovering over an image will cause some text to slide up on a white background. However, I have encountered issues with conflicting code, as I also have overlay text and a 'new&ap ...

htmlcss

When using res.json(), the data is returned as res.data. However, trying to access the _id property within it will result

I'm facing a challenge in comprehending why when I make a res.json call in my application, it successfully sends data (an order object). However, when I attempt to access and assign a specific piece of that data (res.data._id) into a variable, it retu ...

javascriptreactjsexpressaxios

Include a .done() callback within a customized function

In the small class, I have included these functions: var Ajax = { // Send new entry data to database endNewEntry: function (json) { $.post("/controllers/insertEntry.ajax.php", {"json": json}); }, loadView: function (view, target, extra) { ...

javascriptjqueryajaxpromise

Check to see if an array contains any falsy values and return accordingly

My goal is to only return the error message if any value is falsy, and never return the hooray message. I am utilizing lodash. var jawn = [ { "cheese" : true, "with" : true, "without" : true }, { "cheese" ...

javascriptarrays

Fix the positioning of a div in BootStrap and CSS code

Hey there, I'm relatively new to CSS/Bootstrap and currently in the process of learning. I might need to incorporate some CSS into the "chat_funcs" div, but unsure about what code to input to achieve my desired outcome. The issue at hand: What I am ...

htmlcsstwitter-bootstrap

What could be the reason for the failure of the .is(":hover") method?

Here is some code I'm using to fade out certain elements on a webpage if the mouse hasn't moved for a period of time: idleTime = 0; var idleInterval = setInterval(function() { idleTime++; if (idleTime > 1) { var isHovered = $ ...

javascriptjqueryhover

Pedestrian crossing Cordova experiences delayed response despite ontouchstart attempts to fix it

I have been experiencing a delay issue when using a CSS button with the ":active" pseudo-class on my phone. Every time I click the buttons, there is a noticeable delay before entering the active phase. Here is my CSS code: .btn {...} .btn:active{...} To ...

androidjquerycsscordovacrosswalk-runtime

Prevent leaving the body empty while populating a page with Ajax requests

I'm currently facing a dilemma at work. Our team is utilizing Bootstrap, jQuery, and a REST API to populate our web pages. Here's the sequence of events during page loading: The server receives a request A template is served which loads all ne ...

jqueryhtmlajaxtemplates

Exploring JSON information containing colons in the labels

I am having trouble accessing JSON data in Angular that contains a colon in the label (refer to responsedata). This is the code causing issues: <li ng-repeat="i in items.autnresponse.responsedata | searchFor:searchString"> <p>{{i.autn:numhits} ...

javascriptjsonangularjs

Attempting to utilize a Python web scraping tool to extract content from a webpage that undergoes regular text updates

I must admit that I am a complete beginner who is feeling lost and unsure of what to do. My goal is to extract 4 pairs of numbers from a webpage using a web scraper. These numbers change when modified on a different page, but I'm unable to pull the d ...

javascriptpythonhtmlcss

Using "overflow-x: hidden" is ineffective on mobile devices

I'm facing an issue where the CSS property overflow-x: hidden is not working on mobile devices. Here is a snippet of my HTML code: <div class="topbar"> <div class="navbar-brand float-left"> <a href="#"><img src="asset ...

cssbootstrap-4overflow

Guide to creating scroll-based animations for a Div element

I've been brainstorming ways to rotate a div as I scroll. My goal is to recreate the effect shown in this codepen. However, I'm struggling to implement scrolling functionality. What I envision is scrolling down causing the word Data to rotate in ...

javascripthtmlcss

Issues with Internet Explorer

I am currently working on an aspx page that displays perfectly in Mozilla Firefox but looks distorted in Internet Explorer. The layout in Mozilla appears like this: <form> some stuff <div class="left"> <div class="right> </form> H ...

asp.netcssinternet-explorerinternet-explorer-8

What could be causing the npm server error in my Vue.js application?

After recently setting up Node.js and Vue.js, I decided to dive into my first project on Vue titled test. As part of the process, I attempted to configure the server using the command: npm run server However, I encountered the following error message: C ...

javascriptnode.jsvue.jsnpm

Embed JavaScript locally within an iframe HTML

When attempting to add HTML code within an iframe to showcase data, everything works as expected. However, the issue arises when trying to include any JavaScript within the iframe, as it doesn't seem to be recognized locally. Below is the example cod ...

javascriptjqueryhtmljsoniframe