Is there a way to create a text overlay on an image with the text box appearing directly over where the image is positioned, causing the image to disappear completely? When the mouse moves away, the image should reappear. I have looked everywhere for a solution but only found hover effects with text boxes in different positions from the image...
Here is some CSS code for creating a text hover effect:
.textHover {
display:none;
width:100%;
height:100%;
position:absolute;
top:0; left:0;
text-align:center;
color:white;
}
.imgContain {
position:relative;
display:table;
}
.imgContain:hover .textHover {
display:block;
}
And here is the markup you can use to implement this effect:
<div class="imgContain">
<img src="http://placehold.it/300x200"/>
<div class="textHover">My text here</div>
</div>
You can see an example of this in action on this jsFiddle link.
If you're looking for a way to create smooth transitions without relying on CSS3, you can achieve it without using JavaScript. Assuming the image has fixed dimensions, you can use the following code:
<div>
<p>Text</p>
<img src="" alt="" width="100px" height="100px" />
</div>
div { position:relative; z-index:1; height:100px; width:100px; }
img { position:absolute; top:0; left:0; z-index:2; }
div:hover img { display:none; }
There is no need for JavaScript code to accomplish this task; it can be done simply with pure HTML and CSS. Below is an example featuring a CSS animation that changes opacity:
HTML
<div class="hvrbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/22/Bochnia_poland_saltmine.jpg" alt="Salt mine" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div>
</div>
</div>
CSS
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
If you're interested, I have provided more examples with similar functionalities (featuring even better animations) here.
Currently, I am faced with a challenge in setting up absolute position for all images that are dynamically generated through ajax. Below are the snippets of my code: for loop... var imagediv = document.getElementById('image_layout'); //gene ...
It has come to my attention that mobile users on Chrome/Android are experiencing some unusual behavior with modals. The autofocus feature is not working as expected, and the view keeps scrolling to the bottom. This issue specifically occurs with modals th ...
Currently, I am developing a large javascript application which functions as a single page application. My technology stack includes node.js with jade. I have some concerns regarding the loading of javascript files for the front end. Let's say we hav ...
I am encountering difficulties when trying to attach the auth0 token to a http.get request for an API that requires the token. The token is generated upon user login and stored in the browser's local storage, which is functioning properly. The challen ...
I am seeking a way to automatically retrieve documents from web pages using a Python script. The links in the HTML pages appear as follows: href="https://foo.bar/view.php?id=123456" When clicked on in a web browser, these links open the document with its ...
Can anyone assist me with this issue? I'm having trouble understanding why my text is justified but not centered. It appears fine on larger screens, but on the iPhone screen, it is justified yet slightly off-center to the left. How can I center the te ...
To trigger the logout() function, it should only execute if the value of an AngularJS object within rootscope is true. How can I validate this using JavaScript to check the content of the rootscope object? <body ng-controller="myController"> & ...
I have integrated easyui nested layout into my application. I followed the code snippet provided in the easyui demo. <div class="easyui-layout" style="width:700px;height:350px;"> <div data-options="region:'north'" style="height: ...
Hi there, I'm currently facing an issue with making my child div expand to the height of its parent div. Below is the CSS for the parent div: #wrapper #content { border: 1px ridge #999; height: auto; min-height: 1000px; width: 1100px ...
I'm facing a challenge with implementing Flask to display text on an HTML page after a POST request. Even though the POST request returns a 200 code and I can see it in the terminal upon button click, the template with the result text is not being ren ...
Can you provide guidance on how to remove the top-level parent element of a div? I've been attempting to delete the main parent element of a specific div. element.innerHTML = ` <div class="postIt-item"> <div class="postIt-item-btn ...
Whenever I incorporate the following code into my Meteor app: Home = FlowRouter.route("/", { name: "App", action(params) { ReactLayout.render(App); } }); An error message pops up in the Chrome console: Warning: React.createElement: type shoul ...
I am working on an angular-bootstrap modal where I created a custom directive to automatically focus on the input field when opened. However, after adding the directive template to my input tag, I couldn't see it when inspecting the element. Here is t ...
Currently, I am coding in PHP and using Bootstrap. In my project, there are two columns - the LEFT column displays text, while the RIGHT column contains a form: Presently, when viewing on desktop, both columns are visible. However, on mobile devices, ...
I'm currently working on a drop-down navigation bar, and I've encountered an issue. Check out the code here My goal is to have the navigation container's height adjust dynamically when a user hovers over a menu item with children items. Whi ...
VB code Dim temp3 As String = dt.ToString() cmd.Connection = con con.Open() i = cmd.ExecuteNonQuery() con.Close() If i = 1 Then msg = "Record successfully inserted" ...
I'm struggling to turn the image into a drop-down button, but I can't seem to figure it out. I added the dropdown class to the div. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrit ...
For address auto-generation, I am currently utilizing the Google Places API. I have a regular input tag in my HTML where users can type their input and see Google Places suggestions in the dropdown - all working perfectly. However, when I switch to using m ...
I am currently working on implementing a directive pagination feature and I need to pass the current page number from the directive to a controller in order to run a specific function with this argument. However, I keep getting an 'undefined' err ...
I have recently discovered that in react-router-dom v5, it was possible to utilize the <Prompt> component to prompt the user before a page transition occurs, allowing them to prevent it. However, this feature has been removed in v6 with plans for a m ...