Icon that can be clicked before

I'm struggling to figure out how to make the link icon in my code clickable so that users can click anywhere within the card to navigate to another page. I experimented with (" attr(href) ") but it resulted in adding the URL text next to the icon, which is not what I was aiming for. Is this functionality achievable? I came across other posts mentioning it might be a bug. Can anyone confirm if that is still the case?

:root {
    --secondary-color: #4b4945;
    --light-text-color: #fafafa;
    --dark-text-color: #37332f;
    --norm-text-color: #4b4945;
    --bg-med: #efefef;
    --primary-color: #492365;
    --primary-header: #492365;
    --solid-button-text: #fafafa;
    --solid-button-text-hover: #120919;
    --hollow-button-text: #120919;
    --primary-lighter-1: #5b3974;
    --primary-lighter-2: #6a4b81;
    --primary-lighter-3: #a491b2;
    --primary-lighter-4: #d2c8d9;
    --primary-lighter-5: #e4dee8;
    --primary-lighter-6: #ede9f0;
    --primary-darker-1: #42205b;
    --primary-darker-2: #371a4c;
    --primary-darker-3: #251233;
    --primary-darker-4: #120919;
    --hover-shadow: 0px 0px 5px 0px #492365;
    --border-color: #492365;
    --banner-overlay: rgba(73, 35, 101, 0.65);
    --inset-shadow: none;
    --outset-shadow: none;
    --flat-border: 2px solid;
}

.container {
    max-width: 80rem;
    padding: 1rem;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.card {
    border: 2px solid;
    border-color: #492365;
    background-color: #492365;
    box-shadow: none;
    border: var(--flat-border);
    border-color: var(--border-color);
    box-shadow: var(--outset-shadow);
    background-color: var(--primary-color);
    display: flex;
    position: relative;
    flex-flow: column nowrap;
    margin: 0;
}

.card>p:last-of-type {
    margin-bottom: 1rem;
}

.card>p:last-of-type.card__title {
    margin: 0;
}

.card__image {
    background-color: #fefefe;
}

.card__image>img {
    width: 100%;
}

.card__image.--icon {
    background-color: #492365;
    background-color: var(--primary-color);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.card__content {
    flex-grow: 1;
    padding: 0.5rem 1rem;
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    background-color: #fefefe;
    word-break: break-word;
}

.card__content>div {
    flex-grow: 1;
}

.card__content>p:last-child {
    margin-bottom: 0;
}

.card__title {
    background-color: #492365 !important;
    color: #fafafa !important;
    padding: 0.5rem 1rem !important;
    background-color: var(--primary-color) !important;
    color: var(--solid-button-text) !important;
    margin: 0 !important;
}

.card__buttons {
    background: #fefefe;
    padding: 0.5rem 1rem;
    position: relative;
    display: flex;

 [...]

<div class="container">
  <div class="card --linked">
    <a href="https://stackoverflow.com/">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
    </a>
  </div>
</div>

htmlcsspseudo-element

Answer №1

If you want to make it work, simply apply the classes card --linked to the <a> element (nested inside one level deeper):

<div class="container">
  <div>
    <a href="https://stackoverflow.com/" class="card --linked" data-pseudo-text="link">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
    </a>
  </div>
</div>

Additionally, remember to define the data-pseudo-text attribute within the same <a> element:

:root {
    /* CSS Custom Properties */
}

/* Other Styles */

<div class="container">
  <div>
    <a href="https://stackoverflow.com/" class="card --linked" data-pseudo-text="this is your pseudo text">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
    </a>
  </div>
</div>

Answer №2

<div class="container">
<a href="https://example.com/">
  <div class="card --linked">
      <h2 class="card__title">title</h2>
      <div class="card__content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
      </div>
  </div>
 </a>
</div>

The placement of the anchor tag is crucial for connecting the element to the desired link

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

Function is raising an error with the wrong value or text

I am currently testing a form that I am in the process of developing. My goal is to have different values returned each time I click on a different item from the dropdown menu. If this explanation isn't clear, please take a quick look at my pen for cl ...

javascriptjqueryhtmlcss

Hover and focus effects of the main navigation menu in Semantic UI CSS

I seem to be having trouble styling my navbar with semantic-ui. I want to make changes to the color and background-color on hover and when focused. However, no matter what I try, the hover effect just won't work. I was only able to achieve it using jQ ...

javascriptjqueryhtmlcsssemantic-ui

What could be causing the HTML5 canvas not to show up on the screen?

<!doctype html> <html> <head> <title>Canvas test</title> </head> <body> <script type="text/javascript"> c = getElementById('canvas'); ctx = c.getContext("2d")' ctx.fillRect(10,10,10,10); </s ...

javascripthtmlcanvas

The straightforward onclick action only functioned once

Looking for assistance: Can someone explain why this code snippet isn't functioning properly? It seems that the increment is only happening once. var player = document.getElementById("player"); var button = document.getElementById("button"); functio ...

javascripthtmlcssdom

Using jQuery to modify the CSS of a div located outside of an iframe

Currently, I am developing a straightforward script. Firstly, here is all of the code that I have: <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function SuperWebF1() { $("#outerd ...

javascriptjqueryhtmlcssiframe

Prevent user input in HTML

Currently, I am working on creating the 8 puzzle box game using JavaScript and jQuery Mobile. The boxes have been set up with <input readonly></input> tags and placed within a 9x9 table. However, an issue arises when attempting to move a box ...

javascriptjqueryhtmlinputdisabled-input

Utilizing CSS float with dynamic height

Is there a way to achieve height:auto; for a parent element even when child elements are using float:left; or float:right? Solution for the Parent Element: #parent { width:100px; height:auto; padding-bottom:10px; background:#0F0; ...

htmlcss

How can you create a blurred effect on a navbar?

Looking to achieve a unique blur effect in the background of my navbar component. The standard CSS blur effect isn't giving me the desired result, so I'm seeking some guidance on how to customize it. For example: https://i.sstatic.net/bPEXZ.png ...

htmlcss

How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code: <!DOCTYPE html> <html> <head> <title> # <title& ...

htmlcsshtml-tablemenubar

What is the best way to denote multiple line breaks in HTML code?

When creating blank lines on my webpage, I typically use the code <br />. However, inserting 20 - 40 of these can be quite cumbersome as each br tag is placed on a separate line after formatting. Is there a more elegant way to achieve the same effe ...

asp.nethtml

PHP 7.2 does not allow code to reference previously set sessions

Currently, I am utilizing sessions to transmit either a success or error message to the subsequent site by employing an included PHP file (message.php) to exhibit said message. Unfortunately, for unknown reasons, the message.php file is unable to referenc ...

phphtmlsessionphp-7

I'm having trouble getting the npm install for classnames to work within my li tag

I need some help with React JS. I'm attempting to merge my classes using the npm package called classnames. https://www.npmjs.com/package/classnames However, I'm encountering an issue: classnames doesn't seem to be working as expecte ...

javascriptjqueryhtmlreactjsredux

Arranging Bootstrap Grids within Laravel

On my current web page, I have implemented Bootstrap Grids as seen in the image below. Check out My Bootstrap Grid Layout However, I am aiming to achieve a grid layout similar to the one shown in the picture with a red indicator. Here is the Desired Boo ...

phpcsslaravelbootstrap-4

Having difficulty retrieving the value of a dynamically selected radio button in AngularJS

Having trouble with selecting radio options in my code, need some assistance to fix it. Check out my Plnkr Code - http://plnkr.co/edit/MNLOxKqrlN5ccaUs5gpT?p=preview Although I am able to retrieve names for the 'classes' object, the selections ...

javascriptangularjshtmlangularjs-scope

What is the best method to obtain the following id for an image?

Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...

javascripthtmljquerycsscarousel

Switching up the default font style within TinyMCE

After successfully changing the default font within the editor using the guidelines provided here, I have encountered a new issue. The original default font no longer appears in the font drop-down list. The previous default font was Verdana, and the new d ...

javascriptcssfontstinymcefont-face

What is the best way to style the header of a table when scrolling in CSS?

Currently, I am facing an issue with applying the top CSS property to the thead element of a table while scrolling. I have attempted various methods but have been unsuccessful in achieving the desired outcome. Initially, I used the scroll event, however, ...

javascriptjqueryhtmlcss

Responsive design is causing issues with the stacking of rows in Bootstrap

Currently in the process of creating a website using HTML5, CSS3, and Bootstrap technologies. Encountering difficulties while attempting to establish a stacked row-column layout. On desktop view, the design appears as desired, resembling this example: Th ...

htmltwitter-bootstrapcss

Arrange DIV elements sequentially with HTML, JQuery, and CSS

Live Demo: Live Demo HTML: <div class="target"> <img src="bg-clock.png" alt="jQuery" /> </div> <div class="target2"> <img src="bg-clock.png" alt="jQuery" /> </div> CSS: .target, .target2 { ...

javascriptjqueryhtmlcss

What could be causing the image not to appear on the React app?

I'm currently working on a react website, and I'm facing an issue with the image display on the single product page. Despite trying to tweak both the react and CSS code, I haven't been able to resolve the problem. Below is my react file: im ...

htmlcssreactjsimagemern