Hover Link Overlay [CSS / HTML] - An Alternative Style for Link Interaction

I'm having trouble making an image clickable within a hover effect overlay that displays text and a link. I attempted to turn the overlay into a link, but it wasn't successful.

http://jsfiddle.net/cno63gny/

Please disregard the placeholder text and link as they are just temporary. I apologize if this is something basic, I'm still learning.

.post {
  width: 300px;
  height: 300px;
  background: url("http://lorempixel.com/300/300");
  margin: 5% auto 0 auto;
  background-size: cover;
  overflow: hidden;
}

.overlay {
  background: rgba(63, 63, 63, 0.8);
  text-align: center;
  padding: 20px 0 203px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.post:hover .overlay {
  visibility: visible;
  opacity: 1;
}

.overlay a,
.overlay p {
  color: #47f197;
  font-size: 18px;
  font-family: Helvetica;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

.overlay p {
  margin-top: -5px;
  margin-bottom: 230px;
}
<div class="post">
  <div class="overlay">
    <p>Text</p>
    <p><a href="">Link</a></p>
  </div>
</div>

htmlcssimagehoveroverlay

Answer №1

Transform the overlay div into an anchor and specify in CSS that it should be displayed as a block element because anchors are typically inline elements.

It is perfectly acceptable in HTML5 to include block-level p tags within anchor elements.

.post {
  width: 300px;
  height: 300px;
  background: url("http://lorempixel.com/300/300");
  margin: 5% auto 0 auto;
  background-size: cover;
  overflow: hidden;
}

.overlay {
  display: block;
  background: rgba(63, 63, 63, 0.8);
  text-align: center;
  padding: 20px 0 203px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.post:hover .overlay {
  visibility: visible;
  opacity: 1;
}

.overlay a,
.overlay p {
  color: #47f197;
  font-size: 18px;
  font-family: Helvetica;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

.overlay p {
  margin-top: -5px;
  margin-bottom: 230px;
}
<div class="post">
  <a href="http://google.com" class="overlay">
    <p>Text</p>
    <p>Link</p>
  </a>
</div>

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

Alignment and spacing in a flexible direction

Hello, I am developing a bar app. <AppBar position="sticky" className={classes.appBar} > <Container maxWidth="lg"> <Toolbar className={classes.root}> <Typography noWrap> <img src={require("./node ...

cssreactjsmaterial-ui

Is it possible to convert (HTML and CSS3 generated content for paged media) into a PDF format?

Would it be possible to convert a HTML document styled with CSS3 Generated Content for Paged Media into a PDF format? If such an application does not exist, what alternatives can I consider as the foundation for developing a converter? Thank you ...

htmlcssxhtmlpdf-generationcss-paged-media

Does the size of a JavaScript heap, when it's big but not enough to cause a crash, have the potential to slow down a website, aside from just having an

Utilizing angular material dialog, I have incorporated a mat stepper with three tables (one per step), where one or two of them may contain an extensive amount of records. I have already integrated virtual scrolling to improve performance. However, when ...

javascripthtmlangularfrontend

Learn the process of seamlessly playing multiple video files in an HTML format

I am working with multiple video files and I need them to play continuously. The goal is to seamlessly transition from one video to the next without any interruptions on the screen. Below is my current code snippet: -HTML <button onclick="playVi ...

javascripthtml

Having trouble rendering Next.JS dynamic pages using router.push()? Find out how to fix routing issues in your

The issue I am facing revolves around the visibility of the navbar component when using route.push(). It appears that the navbar is not showing up on the page, while the rest of the content including the footer is displayed. My goal is to navigate to a dy ...

htmltypescriptnext.jsroutes

The safari browser is not displaying the menu

I have recently been working on a new website and created a fresh menu for it. While the menu functions perfectly on browsers like Chrome and Firefox, I encountered an error when testing it on Safari. On Safari, the menu appears to be completely hidden. ...

csssafariviewporthidden

Hide the 1, 2, 3 page buttons in Datatables pagination and instead display only the Next and Previous buttons for navigation

I recently implemented datadables.net pagination for my HTML table. I am looking to customize the pagination buttons by hiding or removing the 1, 2, 3 ... buttons and only display Next and Previous Buttons. Is there a way to achieve this by setting paging ...

javascriptjqueryhtmlpaginationdatatables

Add the AJAX response to a div element when the submit button is pressed

Working on a WordPress project involving an AJAX call, I need to return the result of a row to a div with the ID #hero. The challenge is that since the result is inside a for loop and each row has its own hero div, I want the result to be returned to the c ...

phpjqueryhtmlajaxwordpress

How come the buttons in the navbar are not aligning to the right with justify-content-end?

Having trouble aligning the two buttons in my bootstrap navbar to the right. Despite using justify-content-end, it doesn't seem to work. I thought applying d-flex to the container and then justify-content-end to the items would solve the issue, but e ...

csstwitter-bootstrapbootstrap-5

Setting the font size for the entire body of a webpage globally is ineffective

Technology Stack: Nuxt.js + Vuetify.js Problem: Unable to set global body font size Solution Attempt: I tried to adjust the body font size to 40px in ~/assets/style/app.styl: // Import Vuetify styling ...

javascriptcssvue.jsvuetify.jsnuxt.js

AngularJS's support for html5mode on GitHub pages is now available

Is it feasible for GitHub pages to accommodate AngularJS in html5mode? I came across a source online suggesting that it can be done with a fallback page for 404 errors. However, this solution seems flawed as it may result in multiple 404 errors, which wou ...

javascriptangularjshtmlgithub-pages

Tips for Positioning a Page Layout in the Center Using HTML and CSS

I'm a beginner in HTML and CSS and I'm trying to create a simple webpage layout from scratch. I want all the elements of the page (nav, header, section, footer, etc.) to be centered while still keeping the nav bar on the left side. I've set ...

htmlcss

"Utilize jQuery to load a file when hovering over a specific

How can I dynamically load an external file using jQuery when a user hovers over a specific div? I attempted to load the file like a CSS file on hover but was unsuccessful. Is it possible to load a CSS file on hover as I've seen in some examples? $(d ...

javascriptjquerycss

Adjusting the alignment of a facial image on Canvas by selecting specific click-points

I have a unique idea for an app that allows users to correct a tilted face with just 2 clicks The concept is simple - users click on the middle of the nose and the middle of the eyebrows within the image to generate two points: eyebrowMiddle(x1,y1) and no ...

javascripthtmlmathcanvashtml5-canvas

Using JQuery, retain only the initial N elements in a list and discard the rest

I'm looking to streamline a list of items in the DOM by keeping only the first N items, ideally through the use of slice and remove methods. Could someone provide me with the JQuery syntax for removing items that come after the first N in the list? ...

javascriptjqueryhtmldomdom-manipulation

Is it possible to add animation to an SVG filter to create a captivating rotating planet with color effects?

I've added a filter to my self-created SVG and I'm interested in animating it so that the colors move diagonally, giving the appearance of a spinning planet. Below is the code featuring my SVG and how I'd like it to begin with the blue colo ...

javascripthtmlcssreactjssvg

Tips for submitting a form using javascript while preventing the default action

Looking for a way to submit a form in Javascript and prevent the default action? Let's explore how you can achieve this. Initially, my HTML form with the ID "contact_form" had an input element like so: <input id="contact_send_msg" type="submit" val ...

javascripthtmlajaxforms

Finding href links through XPath using a substring of anchor text

In my current HTML project, I am facing a challenge where I need to create an XPath expression to locate all instances of the "A1" text and extract the href attribute from each element on the page. Even though there are multiple occurrences of "A1" through ...

htmlxmlseleniumxpathwebdriver

Encountering a problem when attempting to send an HTML email through PHP

Trying to use PHP to send email within an HTML code snippet. Here's the code I've written: <?php if($_SERVER['REQUEST_METHOD'] == 'POST') { if ( mail ('<a href="/cdn-cgi/l/email-protection" class="_ ...

phphtmlemail

Sending a file through an Ajax POST request to a PHP server

I am attempting to upload the HTML input file to my PHP file using a different method than the traditional synchronous HTML forms. The problem I am encountering is that it seems like I am not correctly POST'ing the input file to my PHP file because t ...

javascriptphpjqueryhtmlajax