Is there a way I can enhance this Caption with some background effects?

I'm running into a little issue - I need to add a caption to my image with a transparent black background at 65% opacity. The caption is currently plain, without any background effects. Urgent help required. Thank you for your assistance. Here is my code:

 <div class="img-wrap"> <div style="300 px; font-size:20px; text-align:center;background-color= "ff0066;">
<img src="/gadgets.jpg" alt="alternate text" width="220px" height="200px" style="padding-bottom:1.0em;">
<a href="#">Gadgets and Accessories</a>
</div>
<div class="img-info">
<h3><a href="#">Gadgets & Accessories</a></h3>
<a href="#">Tablets</a><br>
<a href="#">Headphones</a><br>
<a href="#">External Optical Drives</a><br>
<a href="#">Flexible Keyboards</a><br>
<h3><a href="#">More...</a></h3>
</div>
</div>

The classes img-wrap and img-info have styling code for hover effects - do I need to create a separate class for the caption feature?

htmlcss

Answer №1

If you're on the lookout for something similar to this, take a look below:

FIDDLE

Code Example

<div class="image-wrapper">
    <img src="http://placehold.it/220x200" alt="alternate text" width="220px" height="200px" />
    <a class="image-caption" href="#">Gadgets and Accessories</a>
</div>

Styling - CSS

.image-wrapper
{
    position:relative;
    height: 200px;
    overflow:hidden;
}
.image-caption
{
    width:220px; 
    font-size:20px; 
    text-align:center;
    background-color: rgba(0,0,0,.7);
    position:absolute;
    left:0;
    bottom:-25px;
    color:#fff;
    visibility:hidden;
    transition: all, 0.3s ease 0.2s;
}

img
{
    width: 220px;
    height: 200px;
    display:inline-block;
}
img:hover + .image-caption
{
    visibility:visible;
    bottom: 2px;
    transition: all, 0.3s ease 0.2s;
}

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

What are the primary purposes of the site.webmanifest file?

As I navigate through an HTML Boilerplate, I come across a file named site.webmanifest. Despite my efforts to research its purpose online, I am still unclear about its significance. Could this file be essential for website development? What are the specif ...

javascripthtmlnode.jsboilerplatemanifest.json

Getting access to the current row along with its value within an AngularJS application

Seeking guidance on how to edit and remove a row in angularjs as I am new to it. In my dynamic table, rows are inserted dynamically with links for editing and deleting. I am looking to edit a row upon clicking the edit link. HTML Code: <div ng-contro ...

htmlangularjs

How do I create a notification when the div reaches 100% alignment on the left side using Javascript?

Is there a way to receive an alert when the div with the class name "earth" reaches 100% on the left side, without using jQuery? I attempted to utilize setTimeout but I am looking for an alternative method that does not rely on time, but rather on positi ...

javascriptcss

Instructions for accessing and printing text from a nested ul tag with Selenium in Java

Hello everyone, I am currently learning about Selenium Automation and have created a website as shown below. Here is the HTML code: <!DOCTYPE html> <html> <head><title>Shop</title></head> <body> <ul> < ...

javahtmlcssseleniumselenium-webdriver

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...

javascriptjquerycssgoogle-code-prettify

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

How can I change the color of the paths in an SVG background image assigned to a div using CSS? ...

htmlcsssvg

Is there a way to display x-overflow on a table instead of the window?

Check out the table at the following link: In my CSS, I set a min-width and overflow-x property for the table. However, on the mobile template, the overflow-x does not work properly. I want the template to display correctly with the header and footer in ...

htmlcssresponsive-design

Issue with orientation change when using webkit-overflow-scrolling: touch;

I am currently facing an issue with a fixed position div that has a specified width. The problem arises when the content is long enough to require overflow in one device orientation (landscape), but not the other (portrait) - scrolling stops working if the ...

htmlioscssscrollmobile-safari

Codepen fails to function properly after being uploaded to a server

I have encountered an issue with my code on CodePen. After exporting it as a .zip file and attempting to run it on a local server, it failed to work. I am unsure of the exact reason behind this. I made sure to include all the necessary dependencies in the ...

javascripthtmlcssjsonrss

I am attempting to center an image on a webpage while disregarding the margins set on the

Bar.html: <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="customStyle.css" /> </head> <body> The text formatting is spot on. Unfortunately, the following image should be centered, but it's off ...

ioscsswebkitblockcentering

Choose an image to be displayed at either full width or full height, depending on which dimension is reached first

I have a query regarding resizing an image within a div to either 100% width or 100% height of the containing div. Despite setting max-height and max-width to 100% as recommended here, I still encounter overflow issues without wanting to crop the image usi ...

javascriptcssimage

jQuery width property does not seem to be functional on menus that do not contain any dropdown

I am currently working on creating a menu that displays arrows underneath the items when hovered over or when the .active class is added to the menu. Everything is working fine, except for the fact that it only works on menus with drop-downs and the child ...

javascriptjqueryhtmlcss

Using AngularJS to handle error validation for dropdowns and select elements that will redirect using the ng

Currently, I am utilizing angularjs's ng-href along with a select HTML element containing ng-model. The ng-href is being used to link to the "selectedItem" from ng-model. However, I have encountered difficulty in validating or displaying an error mess ...

javascripthtmlangularjsvalidationangularjs-ng-href

What is the best way to add padding between form elements in Bootstrap 4?

Is there a way to add space between form elements in Bootstrap 4? The code snippet below shows an example where the full name has spacing from '@' but the username does not have any. Any suggestions on how to fix this? <form class="form-inlin ...

htmlcssbootstrap-4

Achieving an element placement in a navigation bar with flexbox and grid layout | HTML and CSS exclusive techniques

Need help achieving the desired result using only flexbox and grid layout. The goal is to place a search bar vertically centered and to the right of the navbar, while keeping the existing items on the left intact. Can you assist? /* Reset */ * { mar ...

htmlcssflexbox

Fill a grid child with an excessive amount of content without specifying a fixed height

Check out this JS Fiddle example .grid { height:100%; display:grid; grid-template-rows:auto 1fr; background-color:yellow; } .lots-of-content-div { height:100%; background-color:orange; overflow-y:auto; } <div class="grid"> <p&g ...

javascripthtmljquerycss

Aligning elements vertically within a parent container

I am facing a problem where elements are not aligning vertically in the center of their parent div. CSS: /* Main body structure */ body{ font-size:0.5em; } .main-wrapper { width: 90%; margin: auto; background-color: #efefef; } * { ...

csshtmlvertical-alignment

In order to have JavaScript showcase a random word from a list when a button is clicked and then display it in a heading 3, follow these steps:

How can I create a JavaScript function that displays a random word from a list when a button is clicked and prints it in a heading 3? I would appreciate a quick response. //Start of Js code let display = document.getElementById("motivato"); console.log(di ...

javascripthtmlcssbootstrap-4

Decrease the height of a div element from the top with the use of jQuery

My goal is to manipulate the height of the div #target when a specific event is triggered, either by reducing/increasing its height from the top or by hiding/showing its content. However, I'm struggling to find a solution to achieve this. The current ...

javascriptjqueryhtmlcss

IE7 encountering a mixed content error when using html5shiv and SSL

In the process of developing my ASP.Net application that utilizes html5shiv and SSL, I encountered mixed content errors in IE7 specifically when using html5shiv. Interestingly, removing html5shiv eliminated the errors. Additionally, my app incorporates upd ...

asp.nethtmlsslinternet-explorer-7html5shiv