I'd like to achieve a hover effect on my image where the text appears in place of the image, without using jQuery or JavaScript.
#content .description {
position: relative;
bottom: 30px;
left: 0px;
display: none;
}
#content:hover .description {
display: block;
}<div id="content">
<img src="sample.png" class="hover-effect" height="200px" width="200px/>
<p class="description">text content will go here</p>
</div>I'm not entirely sure if I grasp what you're looking for, but would this solution meet your needs?
Initial Scenario
#container {
position: relative;
}
.caption {
opacity: 0;
position: absolute;
bottom: 0;
}
.hover:hover {
opacity: 0;
}
.hover:hover + .caption {
opacity: 1;
}<div id="container">
<img src="http://placehold.it/200x200" class="hover" />
<p class="caption">text</p>
</div>Extended Scenario
#container {
display: inline-block;
position: relative;
}
.caption {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity .5s;
background: rgba(0, 0, 0, .5);
color: white;
margin: 0;
padding: 10px;
}
.hover {
display: block;
}
#container:hover .caption {
opacity: 1;
}<div id="container">
<img src="http://placehold.it/200x200" class="hover" />
<p class="caption">text</p>
</div>Check out this interactive example: https://jsfiddle.net/2y67zerm/
You have the option to utilize either the display property or the visibility attribute for this solution
#wrapper .text {
position: absolute;
bottom: 30px;
left: 10px;
top:10px;
visibility: hidden;
display:none;
}
#wrapper:hover .text {
visibility: visible;
display:block;
z-index:1000;
}<div id="wrapper">
<img src="kero.png" class="hover" height="200px" width="200px" />
<p class="text">text</p>
</div>Check out the following link: http://www.example.com/hover-effect-demo
This demonstrates how to use "hover" effects in CSS.
If you have any questions or need further clarification, feel free to reach out.
Thank you!
#container{
position:relative;
}
#container .message {
position: absolute;
bottom: 20px;
left: 10px;
display: none;
}
#container:hover .message {
display: block;
}
#container:hover img{
display: none;
}
To achieve this, you can utilize the display CSS attribute.
#wrapper p { display: none; }
#wrapper:hover img { display: none; }
#wrapper:hover p { display: block; }
The unnecessary classes in your example have been removed for simplicity.
Here is the solution:
<style>
#wrapper p { display: none; }
#wrapper:hover img { display: none; }
#wrapper:hover p { display: block; }
</style>
<div id="wrapper">
<img src="http://i.imgur.com/UHqk6nC.jpg" />
<p>Some text</p>
</div>
You can view an example of this code in action on this fiddle: https://jsfiddle.net/nt5vjywu/
We hope this helps!
UPDATE:
An updated version of the fiddle now includes hovering text on top. Please note the order change of the img and p tags.
HTML Code <div class="app-header-logo"> <a href="/home"><img ng-src="img/..."/></a> </div> CSS Styles .app-header-logo { width: 48px; height: 64px; padding: 8px 0px 8px 0px; margin: 0px 16px 0px ...
I'm trying to create a two-column layout, where the left column contains a vertically centered button and the right column is text only. Although I have successfully implemented the two-column layout, I am facing difficulty centering the button due t ...
I'm looking to replace the Fontawesome icons on this template. The full HTML code is available here, but I only need to swap out one specific icon with an SVG. https://i.sstatic.net/k1DFZ.png <div class="col-md-4"> ...
Here is a table generated by GridView: <table id="ctl00_centerContent_GridView1"> <tr> <th scope="col"> <!-- COLUMN INFORMATION --> </th> </tr> <tr> ...
http://jsfiddle.net/q8P7Y/ I am currently facing an issue with displaying the final score at the end of a project. There are multiple approaches I can take to solve this problem, but I am unsure of the best way to proceed. In my current setup, the next b ...
I can't seem to figure out why I'm struggling to set the background of my component correctly without having to use ViewEncapsulation.None. Currently, with ViewEncapsulation.None, my styles look like this: * { margin: 0; padding: 0; ...
I'm struggling with making the code below (from bootstrap v4) scrollable. I want to treat the v-pills-tab as a child of a container that has a set height and a maximum height of 100%: <div class="nav flex-column nav-pills" id="v-pills-tab" role="t ...
I'm having some trouble figuring out what's going wrong with my rCarousel setup. Specifically, I can't seem to get the top part labeled "vrienden van het koksgilde" to work properly. Despite following the instructions on , I'm still no ...
Currently, I am working on a mini web application that involves fetching data from the server using a php script and Jquery's AJAX methods. The plan is to slide down three columns in a table layout, then display additional data under each row when hov ...
My latest project involves the conversion of an existing MS Access 2007 application into a web-based application. Currently, all data is stored in a SQL Server 2005 database. Given my limited web development experience, I am approaching this task with caut ...
I'm new to Vue.js and I'm experimenting with adding and removing stylesheets in components using the mounted and unmounted lifecycles. Initially, I successfully added a stylesheet using the following code: mounted() { this.style = document. ...
Is there a way to link directly to the JavaScript controlling a particular HTML element, unlike the typical "inspect element" approach which is limited to HTML and CSS? ...
I am facing an issue with my Asp.Net page that includes a grid and an image. The image is a Google Charts chart with a URL of approximately 1600 characters. To send this content as an email attachment, I created an .htm file containing the grid and the ima ...
I am faced with a challenge involving two HTML pages. The first page features 3 tables containing people's names and last names, while the second page houses a single heading element. My goal is to enable users to click on a table on the first page an ...
I managed to successfully create a design using the CSS properties border-image and linear-gradient. However, I am struggling to understand the syntax involved. While I grasp the concept that the series of colors defines the gradient transition, as well as ...
I have created an inline list of buttons in a banner that extends off the screen. I am looking to implement a swipe feature so users can easily navigate through the buttons that are not visible on the screen. <style> .banner-test { // ...
Currently, I am diving deeper into the world of scss and finding myself a bit perplexed by certain aspects. I'm hoping for some guidance from knowledgeable individuals. One issue I am facing involves defining different font sizes for various headings ...
Good day everyone, I've been racking my brain trying to figure out the issue I'm facing. The navigation menu is hiding behind the footer instead of appearing above it. You can view my code here /* Navigation Menu */ .menu {display: flex; flex- ...
Hey there, I'm currently using the primeng carousel component and running into an issue where the carousel height is always based on the tallest item. I am looking to have an automatic height for each individual carousel item instead. Do you think th ...
Is it possible to create a nested list in AngularJS 1.3 where each option contains its own list? I've tried implementing it using this, but the select tag seems to cut it short. Any solutions or workarounds for this issue? <body ng-app=""> &l ...