Can you have markup like this while also having a background overlay on hover?
<figure class="gallery-item">
<div class="gallery-icon landscape" style="background-color: #333;">
<a href="www.google.com">
<img src="http://placehold.it/300x300" />
</a>
</div>
</figure>
I attempted to add background-color: #333 to .gallery-icon on hover, but only got something like border-bottom appearing instead.
You are making great progress. Utilizing an :after element for the icon is a smart choice, and it's important to maintain its positioning and dimensions based on the icon itself.
The effectiveness of the :after selector lies in its ability to position itself correctly without relying on the dimensions of its parent containers. To ensure proper positioning with absolute placement, it's crucial to define the dimensions of the parent element so the child element understands its boundaries.
To start, since .gallery-icon is already a block element, specifying its height (rather than width) is sufficient:
.gallery-icon {
position: relative;
height: 100%;
}
Additionally, utilizing a :before element to set a background color eliminates the need to adjust the existing :after icon:
&:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #333;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
By adding an opacity change on hover, you can enhance the visual presentation:
&:hover {
.gallery-icon {
&:before {
opacity: .5;
}
&:after {
opacity: 0.6;
}
}
For convenience, I've created a codepen based on your original work: http://codepen.io/anon/pen/JRWqxX
Regarding the issue with the img tag extending past the container's bottom, a simple fix involves:
.gallery-icon {
img {
display: block;
}
To fully grasp how your markup functions, consider that your image will appear above everything else. When a background color is applied to .gallery-icon, it will be positioned underneath the image. Since the anchor link does not have set width and height values, only a small portion is occupied, which explains the appearance of a border at the bottom.
If you wish to create a background overlay upon hovering, you must ensure it sits atop the image.
An example of utilizing a pseudo element for this purpose:
&:hover .gallery-icon {
&::before {
content: '';
background-color: #333;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.2;
}
}
The use of position absolute in the pseudo element ensures it appears above the image. Setting top, left, right, and bottom to 0 instructs the pseudo element to expand both vertically and horizontally to match the parent element's dimensions.
I hope this explanation proves helpful.
Attempting to streamline the code a bit. Hopefully, this aligns with your desired outcome.
The key is to treat a as a separate element from img.
<figure class="gallery-item">
<a href="www.samplelink.com"></a>
<img src="http://placehold.it/300x300">
</figure>
The picture with a solid background color found at this link creates an interesting visual, doesn't it?
This choice of background blocks out anything happening in the background.
Initially, I was unsure about the kind of research I needed to conduct, which led me to asking a potentially duplicate question. Nevertheless, the code I am working with is quite simple: #my-container { height: 100vh; } <link rel="stylesheet" hr ...
My goal is to implement a JavaScript function that will shade specific areas of canvas drawings when clicked. Below is the code I have that draws a square inside a circle. <!DOCTYPE HTML> <html> <head> </head> <body&g ...
Seeking assistance with my code and the errors I'm encountering - any guidance would be highly valued. Currently facing an issue with getNextAcountNumber. I attempted to assign the account ID value, but encountered a problem as it is a private member ...
I need assistance in modifying a script that causes a fade effect on certain elements only on desktop and not on mobile devices. I have attempted using the code below, but it seems to hide all elements on all screen resolutions. In my CSS, I am applying ...
These are the columns I have (Fiddle: https://jsfiddle.net/DTcHh/15420/embedded/result/) https://i.sstatic.net/Uvi0g.png Using flex, I was able to achieve equal height for the columns: @media (min-width: 992px) { .columns-equal { display: -we ...
I am currently developing a Twitter fetcher application and have encountered some issues with the scrolling functionality, particularly due to oversized images. I would like to implement image restrictions similar to what Twitter uses. https://i.sstatic.n ...
My programming code seems to be acting oddly. I have structured my data in a JSON object as follows: injectJson = { "title": "Champion Challenge Questions", "rules": [ { "idChrono": "chrono-minute", "text": "Top is missing!", ...
I've been experimenting with drawing circles on images using the map property in HTML. I have an image set up, and when clicking on the image in JavaScript, I'm adding the area coordinates for the map property. However, I keep encountering a null ...
I am attempting to extract the names and positions of random individuals from Sales Navigator. Each person is displayed as a card containing all their information. Despite obtaining a list of these cards, I am struggling to retrieve the Name and Title for ...
Behold my HTML creation: <H1> <center> EPIC GUITAR JAM </center> </H1> <img class="guitar" src="guitar.jpg" /> <button class="strum" onclick="Strum()"> Strum Chord </button> <button class="pluck" o ...
I'm in the process of creating a basic form that allows users to input their name/email and their friend's name/email. The code snippet can be found below. Interestingly, while most browsers autofill only the first two fields, iOS Safari on my i ...
In my project, I have a Custom Mega Menu that dynamically creates code to display all Nav bar entries. Since changing the logic of Mega menu creation is difficult, I am looking for a CSS solution to avoid fixed height in bootstrap columns. My code structu ...
Received data from the server is in HTML format. I need to show it on my Text View with proper formatting such as bold, font style, etc. How can I achieve this? Thank you in advance ...
Using ngFor in a div to display an object containing HTML from an array collection. However, I want the object with the HTML node (HTMLElement) to be displayed without being wrapped in a div as specified by the ngFor Directive. Below is my HTML code snipp ...
I'm currently working with a nested ng-repeat on a 2d array and have added ng-model to the third ng-repeat. However, I am encountering an issue where my ng-model is not properly storing the data within the object. JavaScript Code emrService .getDat ...
I'm currently experimenting with a combination of HTML, JavaScript, and PHP on a single page. My goal is to update a JSON file with either 0 or 1 based on the toggle switch state change. I seem to be close to achieving this functionality, but upon rel ...
I am attempting to replicate the materialize style for input boxes where the label moves up and decreases in font size with animation when the text box is clicked. Although I have managed to achieve this effect, there seems to be a slight issue. When clic ...
Is there a way to redirect an old link to a new link in MVC? In Google search results, my old URL was cached as www.abcd.com/product?id=64 however, my new URL is now www.abcd.com/product/sample How can I set up a redirect so that when a user clicks on th ...
Is it possible to utilize the srcset attribute in CSS to upscale all images to 2x their original size? The usual usage of this attribute is as follows: <img src="image.jpg" srcset="image.jpg 1x, higher-resolution-image.jpg 2x" > I'm curious if ...
Just starting out with codeigniter and curious - how can I upload multiple files to the server simultaneously with different names using codeigniter? ...