I am looking to create a similar effect as seen on this website
My goal is to display a link with a Bootstrap icon when I hover over an image. I am currently working with Bootstrap 3.
original image
when hovered
Any tips on how I can make this happen?
CSS Styles
.main-block {
width:200px;
height:auto;
position:relative;
display:block;}
.main-block img{width:100%; }
.main-block .badge {width:29px;
height:55px;
background:url(images/badge.png) no-repeat 0 0;
position:absolute;
right:10px;
top:0;
display:none;}
.main-block .badge a {display:block;
height:55px;}
.main-block:hover .badge {display:block;}
HTML Markup
<div class="main-block"><div class="badge"><a href="#"></a></div><img src="images/character-render.gif" width="400" height="300" alt="1" /> </div>
To implement this feature, you can utilize pure HTML and CSS.
HTML:
<div class="image-container">
<img src="http://placekitten.com/240/310" />
<a class="show-on-hover" href="#"></a>
</div>
CSS:
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
display: block;
}
.show-on-hover {
display: none;
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 0;
background: url('http://placekitten.com/20/30');
}
.image-container:hover .show-on-hover {
display: block;
}
Example: http://jsfiddle.net/HRb4L/
You have the ability to achieve this effect with CSS
HTML:
<a href="#"><img src="image_url" /></a>
CSS:
a {
position: relative;
display: inline-block;
}
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* customize your background */
width: 20px; /* image width */
height: 100px; /* image height */
position: absolute;
top: 0;
right: 0;
}
REFERENCE
While this method may not be the most efficient, it is possible to achieve the desired effect with code similar to this:
Here's the HTML structure:
<div class="thumbnail-parent">
<img class="thumbnail" src="http://placehold.it/200x200" />
<div class="badge"></div>
</div>
The corresponding CSS styling would look like this:
.thumbnail-parent, .thumbnail {
width: 200px;
height: 200px;
position: relative;
display: inline-block;
}
.badge {
width: 20px;
height: 20px;
background-color: Black;
position: absolute;
top: 0px;
right: 0px;
visibility: hidden;
}
.thumbnail-parent:hover .badge {
visibility: visible;
}
When I choose one item from a dropdown list of 3, the selected item is still visible in the dropdown along with the other two. I would like all three items to be displayed even if one is selected. reference dropdown Based on the reference image, even thou ...
I want to display a hidden link when the user begins typing in any of the text inputs within div class="filters". The link should only remain hidden if all fields are empty or contain the default values specified in the HTML. Here is the current code snip ...
I need help with a script that runs for 10 minutes and creates logs and outputs during execution. I want to pass these logs to an HTML file using Flask. ...
I'm facing a bit of a challenge with incorporating the Osano Cookie Consent JavaScript plugin into my nextjs app. I've been attempting to set up the cc object by initializing it in the useEffect of my root landing page: const CC = require( " ...
I'm a beginner when it comes to using AJAX in Ruby on Rails. What I'm trying to achieve is that when a user clicks on a link with the class .link (redirecting to an external site, for example www.google.de), it should send data - specifically the ...
I am currently experimenting with and making adjustments to this d3.js example in order to create a tree based on a JSON structure. In this tree, the root node is initially expanded while all other nodes are collapsed. My goal is to modify it by providin ...
I have been struggling with this problem for hours and it's really starting to frustrate me! Currently, I am incorporating Twitter Bootstrap along with bootstrap-min.js. This is the code snippet in question: <select id="assettype" name="assettyp ...
Within the code snippet below, taken from the multer API, both the destination and filename options consist of anonymous functions. These functions contain an argument named cb. I am curious whether these callback functions are defined within the multer ...
Can someone assist me with defining JSP pages as content for my tabs using the "jsp:include" tag? Here's an example (Note: "page0.jsp")... <ul id="smTabs" class="nav nav-tabs" style="margin-bottom: 15px;"> <li class="act ...
Currently, my NodeJS/Angular/Electron app is utilizing the ExcelJS library to read large Excel files that contain over 10,000 lines. While smaller files are processed smoothly, larger files take between 3.9 and 5 seconds to load, during which time the CSS ...
Currently, my focus is on creating a dashboard using backbone and highcharts. In order to display different charts on the front end, I am utilizing a MySQL server as the backend source of all the necessary data. The approach we are aiming for involves hav ...
I've been working on incorporating multiple instances of the same form within another form. I believe I'm close to making it work, but there seems to be a disconnect somewhere. My goal is to calculate the totals for each form and then sum up all ...
Here is the code snippet I am working with using jQuery: var dataString = "class_id="+class_id; $.ajax({ type: "POST", url: "page.php", data: dataString, success: function (msg) { //stuck here }, error: function () { ...
Within my code, I am working with an array that contains IDs of div elements (specifically, the IDs of all child div elements within a parent div with the ID of #area): jQuery.fn.getIdArray = function () { var ret = []; $('[id]', this).each(fu ...
Is there a more efficient way to implement conditional formatting for this scenario? const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => { const className = this.props.store.currentPage === this.props.pageNum ...
Is there a way to align these two div side by side? <div class="main_one"> <div class="number_one">Title A</div> </div> <div class="main_two"> <div class="number_two">Title B</div> </div> <div class=" ...
I am facing an issue with adding a new fruit to a string that is converted into an array. Here's the scenario: var fruits = "banana,apple"; In an attempt to add a new fruit to this list, I tried converting it to an array and then using the push meth ...
<div class="thickness-productlist">CLEAR</div> <span class="anchor3" @click="thicknessOnClick">Select (mm)</span> <ul class="items3"> <div class="checkbox-alignment-application-filter"> ...
Trying to incorporate a unique custom command in Cypress (commands.js file) as follows: Cypress.Commands.add("login", (email, password) => { cy.intercept('POST', '**/auth').as('login'); cy.visit(& ...
Recently diving into the world of Angular 6, I have been working on developing an application with this powerful framework. However, one challenge that came my way was figuring out how to effectively share data between components. In my project, I have tw ...