1

I have looked through a number of similar questions but can not find a specific example of one that answers in vanilla JS how to add and remove a class to a different element from the one hovered over. I know it has something to do with setting up a loop and iterating through the elements, but I got lost in the exact process.

Basically, I have a close button on my cards and I want the close button to be shown only when someone hovers over the card. I have added 2 different classes to show it and hide it, however, my script does not work.

Unfortunately, I am not allowed to use JQuery.

     var closeButton = document.getElementsByClassName('close');
        var card = document.getElementsByClassName('.card')
        for (var i = 0; i < card.length; i++) {
            card[i].addEventListener("mouseover", function() {
                for (var i = 0; i < closeButton.length; i++) {
                    closeButton[i].classList.add('shown');
                    closeButton[i].classList.remove('hidden');
                }
            });
            card[i].addEventListener("mouseout", function() {
                for (var i = 0; i < closeButton.length; i++) {
                    closeButton[i].remove('shown');
                    closeButton[i].add('hidden');
                }
            });
        }
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden] {
    display: none
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html,
button,
input,
select,
textarea {
    font-family: sans-serif
}

body {
    margin: 0
}

a:active,
a:hover {
    outline: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

h2 {
    font-size: 1.5em;
    margin: .83em 0
}

h3 {
    font-size: 1.17em;
    margin: 1em 0
}

h4 {
    font-size: 1em;
    margin: 1.33em 0
}

h5 {
    font-size: .83em;
    margin: 1.67em 0
}

h6 {
    font-size: .67em;
    margin: 2.33em 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

blockquote {
    margin: 1em 40px
}

dfn {
    font-style: italic
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

mark {
    background: #ff0;
    color: #000
}

p,
pre {
    margin: 1em 0
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: none
}

q:before,
q:after {
    content: '';
    content: none
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

dl,
menu,
ol,
ul {
    margin: 1em 0
}

dd {
    margin: 0 0 0 40px
}

menu,
ol,
ul {
    padding: 0 0 0 40px
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
    padding: 0;
    margin: 0
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0
}

form {
    margin: 0
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px
}

button,
input,
select,
textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle
}

button,
input {
    line-height: normal
}

button,
select {
    text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
    *overflow: visible
}

button[disabled],
html input[disabled] {
    cursor: default
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px
}

input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

a:link {
    text-decoration: none !important;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

html {
    font-size: 100%;
    font-family: sans-serif;
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #f8f8f8;
}

#wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px;
    max-width: 980px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.headline {
    padding: 0 10px;
}

.headline .promoted-stories {
    font-weight: bold;
    color: #404040;
}

.headline .taboola-link {
    float: right;
}

.headline .taboola-link a {
    font-weight: 300;
    line-height: normal;
    text-align: right;
    color: #888888;
    font-size: 11px;
}

.cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card {
    display: block;
    min-height: 1px;
    margin: 1%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 31.33333333%;
    flex: 0 0 31.33333333%;
    -webkit-box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
    -webkit-transition: all .25s;
    transition: all .25s;
    position: relative;
}

.card:hover {
    -webkit-transform: translate(0, -2px);
    transform: translate(0, -2px);
    -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.card .thumbnail {
    display: block;
    height: 130px;
}

.card img {
    height: 100%;
    width: 100%;
    border: none;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.card-content {
    padding: 5px 10px 25px;
}

.card .card-content .card-title {
    margin: 5px 0 0 0;
    overflow: hidden;
    color: #000;
    font-weight: bold;
    max-height: 72px;
    font-size: .875rem;
    line-height: 1.5rem;
    text-decoration: none;
}

.card .card-content .category {
    color: #999999;
    font-size: 11.0px;
    font-weight: bold;
    text-decoration: none;
    margin: 5px 0 0 0;
    overflow: hidden;
    max-height: 52px;
}

.close {
    position: absolute;
    right: 15px;
    top: 5px;
}

.shown {
    display: block;
}

.hidden {
    display: none;
}

.close:before,
.close:after {
    position: absolute;
    left: 0;
    right: 0;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #fff;
}

.close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media only screen and (max-width: 768px) {
    .card {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
    }
}

@media only screen and (max-width: 480px) {
    .card {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 98%;
        flex: 0 0 98%;
        margin: 2%;
    }

    .card .thumbnail,
    .card .thumbnail a:first-of-type {
        height: 170px;
    }
}
    <section id="wrapper">
        <div class="headline clearfix">
            <span class="promoted-stories">Promoted stories</span>
            <span class="taboola-link"><a href="#">Sponsored Links by Taboola</a></span>
        </div>
        <div class="cards clearfix">
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="3 Reasons Why You Haven't Found Your Match Yet">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">3 Reasons Why You Haven't Found Your Match Yet</h2>
                    <p class="category">Dating life</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Harry And Meghan Announce Baby On The Way">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">Harry And Meghan Announce Baby On The Way</h2>
                    <p class="category">Royals</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Things Get Seriously Real As RuPaul Cast Open Up">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">Things Get Seriously Real As RuPaul Cast Open Up</h2>
                    <p class="category">Celebrities</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="A Tiger Collapsed In A Russian Circus Mid-Show">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">A Tiger Collapsed In A Russian Circus Mid-Show</h2>
                    <p class="category">Circus</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Engagement On The Cards For Jack And Dani">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">Engagement On The Cards For Jack And Dani</h2>
                    <p class="category">Dating life</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Attwood Hits Back At Rumours Of Dani Dyer Fued">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">Attwood Hits Back At Rumours Of Dani Dyer Fued</h2>
                    <p class="category">Gossip</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
        </div>
    </section>

Improve this question
2
  • Welcome to Stack Overflow. Always, always, always provide all the relevant code to your question directly, rather than linking to your code on a 3rd party site as those links can die over time making your question meaningless for those who come across it. Just include your code in a "code snippet" (available on the toolbar when you are creating your question). Commented Oct 27, 2018 at 18:35
  • Thank you guys, I appreciate it. Unfortunately, I have always been using jQuery and this project is a simple test for my js skills but I am still unable to find the solution. Could someone please modify the code and let me know what I am doing wrong besides the variable "i". Commented Oct 27, 2018 at 18:42

3 Answers 3

Reset to default
1

In your code document.getElementsByClassName('.card') will look for elements which has class name as .card and not card. Also you don't need two classes for this functionality. Just removing hidden class will do the work.

Here is updated JS code:

(function() {
    document.querySelectorAll(".card").forEach(function(card) {
      card.addEventListener("mouseenter", function() {
        card.querySelector(".close").classList.remove("hidden");
      })
      card.addEventListener("mouseout", function() {
        card.querySelector(".close").classList.add("hidden");
      })
    })
  })()

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Good answers on Stack Overflow consist of more than just working code. They should answer the question that was asked and explain any provided solution. Additionally, posting a solution that is largely the same as one that has already been posted adds no real value to anyone. You will find that even a "correct" solution will often be down voted because it's a poor overall answer.
Thanks @ScottMarcus :) I've updated my answer. Pointed out changes and removed unmodified css and html code from answer.
Ok, but your answer uses .querySelectorAll() even though you've described how to correctly do it with .getElementsByClassName(). You don't explain why you chose to use .querySelectorAll(). Also, there are issues with the looping variable i, which you don't address.
1

Try it

function find( el, tagName ) {
    tagName = tagName.toUpperCase();
    let nsi = el.nextElementSibling;
    if ( nsi === null || nsi.children === null || nsi.children.length === 0 ) return null;
    for ( let c of nsi.children ) {
        if ( c.tagName === tagName ) return c;
    }
    return null;
};
let card = document.getElementsByClassName( 'card' );
for ( let c of card ) {
    c.addEventListener( "mouseover", function ( e ) {
        let el = find( e.target, "a" );
        if ( el === null ) return;
        el.classList.add( 'shown' );
        el.classList.remove( 'hidden' );
    }, false );
    c.addEventListener( "mouseout", function ( e ) {
        let open = document.querySelectorAll( ".close.shown" );
        if ( open !== null ) {
            for ( let obtn of open ) {
                obtn.classList.remove( 'shown' );
                obtn.classList.add( 'hidden' );
            }
        }
    }, false );
};

Run jsfiddle

Your Error JavaScript:
i) closeButton[i].remove( 'shown' ); will be run time error; remove is not typeof("function") here and you've to remove class from classList
ii) closeButton[i].add( 'hidden' ); will be run time error; add is not typeof("function") here and you've to add class into classList
iii) var card = document.getElementsByClassName('.card') card length should be 0 because it'll find all .card not card class

Edit

//Correction
//closeButton[i].classList.remove( 'shown' ); 
//closeButton[i].classList.add( 'hidden' ); 
//var card = document.getElementsByClassName('card');

Learn more let of Iterating over an Array

Improve this answer

4 Comments

Good answers on Stack Overflow consist of more than just working code. They should answer the question that was asked and explain any provided solution. Your answer only says that certain lines will throw errors, but you don't explain why. You use let in your answer but again, don't explain why. You will find that even a "correct" solution will often be down voted because it's a poor overall answer.
@ScottMarcus :) I've updated my ans. Welcome for good suggestions.
But your update doesn't take any of my suggestions into account. You've added let of but not explained why and you've said that certainly lines will throw errors but not explained why. Answers must explain what they are doing.
Sorry to say, but this is only slightly better. Instead of explaining what's wrong with code comments, take the time to write it out. And, since let of isn't really needed to solve this issue, you'll need to explain why you are using it, not just post a link for what it does. In short, take the time to write out what the problem(s) were with the original approach and why or how your solution solves it.
0

Your actual JavaScript problems were that you have nested loops that declare and use the same variable as the parent loop, which resets the outer loop counter and therefore you don't loop the way you need to. Using different variables for the inner loops would be the key there.

Also, when you access the same variable in a nested loop that was declared at a higher scope, it sets up a "closure" around the i variable. This causes all the cards to share the same i value and by the time a user gets around to hovering over any of the cards, i is one more than the length of the card array and thus, out of bounds for finding any card to match up to. The solution would be to simply declare i with let instead of var which sets up block level scope and avoids the closure.

Now, having said that, there is no need to have a class for shown and a class for hidden. You only need a class for hidden and you will simply apply or remove that one class to control the visibility of the button.

But, in actuality, you don't need any JavaScript for this at all, just a little CSS which controls the display of the "button" based on whether the ancestor "card" is hovered.

/* Default styling of "close" buttons is hidden */
.card a.close {
  display:none;
}

/* When ancestor "card" is hovered, change display to shown */
.card:hover a.close{
  display:block;
  font-weight:bold;
}

/* ******************************** */


/*! normalize.css v1.1.0 | MIT License | git.io/normalize */

figure {
    margin: 0
}

a:link {
    text-decoration: none !important;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

html {
    font-size: 100%;
    font-family: sans-serif;
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #f8f8f8;
}

#wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px;
    max-width: 980px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.headline {
    padding: 0 10px;
}

.headline .promoted-stories {
    font-weight: bold;
    color: #404040;
}

.headline .taboola-link {
    float: right;
}

.headline .taboola-link a {
    font-weight: 300;
    line-height: normal;
    text-align: right;
    color: #888888;
    font-size: 11px;
}

.cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card {
    display: block;
    min-height: 1px;
    margin: 1%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 31.33333333%;
    flex: 0 0 31.33333333%;
    -webkit-box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
    -webkit-transition: all .25s;
    transition: all .25s;
    position: relative;
}

.card:hover {
    -webkit-transform: translate(0, -2px);
    transform: translate(0, -2px);
    -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.card .thumbnail {
    display: block;
    height: 130px;
}

.card img {
    height: 100%;
    width: 100%;
    border: none;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.card-content {
    padding: 5px 10px 25px;
}

.card .card-content .card-title {
    margin: 5px 0 0 0;
    overflow: hidden;
    color: #000;
    font-weight: bold;
    max-height: 72px;
    font-size: .875rem;
    line-height: 1.5rem;
    text-decoration: none;
}

.card .card-content .category {
    color: #999999;
    font-size: 11.0px;
    font-weight: bold;
    text-decoration: none;
    margin: 5px 0 0 0;
    overflow: hidden;
    max-height: 52px;
}

.close {
    position: absolute;
    right: 15px;
    top: 5px;
}

.close:before,
.close:after {
    position: absolute;
    left: 0;
    right: 0;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #fff;
}

.close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
<section id="wrapper">
        <div class="headline clearfix">
            <span class="promoted-stories">Promoted stories</span>
            <span class="taboola-link"><a href="#">Sponsored Links by Taboola</a></span>
        </div>
        <div class="cards clearfix">
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="3 Reasons Why You Haven't Found Your Match Yet">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">3 Reasons Why You Haven't Found Your Match Yet</h2>
                    <p class="category">Dating life</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Harry And Meghan Announce Baby On The Way">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">Harry And Meghan Announce Baby On The Way</h2>
                    <p class="category">Royals</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Things Get Seriously Real As RuPaul Cast Open Up">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">Things Get Seriously Real As RuPaul Cast Open Up</h2>
                    <p class="category">Celebrities</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="A Tiger Collapsed In A Russian Circus Mid-Show">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">A Tiger Collapsed In A Russian Circus Mid-Show</h2>
                    <p class="category">Circus</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Engagement On The Cards For Jack And Dani">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">Engagement On The Cards For Jack And Dani</h2>
                    <p class="category">Dating life</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
            <article class="card">
                <a class="overlay" href="#overlay-link"></a>
                <figure class="thumbnail">
                    <img src="https://img.ohmymag.co.uk/headline/480/0f2af4ec6e8d3971480358d00e67e2e8117d994e.jpg" alt="Attwood Hits Back At Rumours Of Dani Dyer Fued">
                    <a href="#" class="close hidden"></a><!-- close hidden button -->
                </figure>
                <div class="card-content">
                    <h2 class="card-title">Attwood Hits Back At Rumours Of Dani Dyer Fued</h2>
                    <p class="category">Gossip</p>
                </div><!-- .card-content -->
            </article><!-- .card -->
        </div>
    </section>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.