When I drag one card with the red border, I wanted to only show the dragged element. So, I added the .invisible class to the original element, but everything is invisible now. Why?
Full code here: https://codepen.io/asamad9134/pen/WNKLpZb
const cards = document.querySelector('.cards');
cards.addEventListener('dragstart', (event) => {
const selectedCard = event.target;
selectedCard.classList.add('invisible');
});
cards.addEventListener('dragend', (event) => {
const selectedCard = event.target;
selectedCard.classList.remove('invisible');
});
.cards {
display: flex;
width: 100vw;
justify-content: space-around;
}
.card {
font-family: Arabic;
border-radius: 10%;
;
font-size: 4em;
text-align: center;
width: 200px;
height: 130px;
background-color: white;
border: 10px solid rgb(255, 85, 0);
}
.card:hover {
cursor: grab;
transform: scale(1.2);
transition: 0.3s;
}
.empty-divs {
display: flex;
justify-content: space-around;
width: 100vw;
}
.empty-div {
display: flex;
flex-direction: column;
align-items: center;
}
.blank-card {
width: 200px;
height: 130px;
background-color: #f4f4f4;
border-radius: 10%;
text-align: center;
border: 10px solid grey;
}
.invisible {
display: none;
}
<section class="cards">
<p class="card card-idle" id="أَرْنَب" draggable=true>أَرْنَب</p>
<p class="card card-idle" draggable=true>كِتَاب</p>
<p class="card card-idle" draggable=true>كُرَة</p>
</section>
<section class="empty-divs">
<div class="empty-div">
<img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
<p class="blank-card"></p>
</div>
<div class="empty-div">
<img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
<p class="blank-card"></p>
</div>
<div class="empty-div">
<img id="rabbit" src="http://source.unsplash.com/random/200x200" alt="rabbit" />
<p class="blank-card"></p>
</div>
</section>
EDIT, I set the opacity: 0; instead but this has a strange lag affect.
display: none; removes the tag and its effects for all intents and purposes, but the tag remains visible in the source code. Try using opacity: 0.4; so that it's visibility is changed and not completely removed from the structure. You could then set that opacity to 0 if you wanted it to be completely invisibile, but not be removed.
Here's an approach to make it so that only the current element that is being dragged displays. Note that I also used visibility: hidden to hide the cards instead of opacity: 0.
// create a nodelist of all of the cards
const cards = document.querySelectorAll('.card');
// add a an event listener for each card in the nodelist
cards.forEach(card => {
card.addEventListener('dragstart', (event) => {
const selectedCard = event.target;
// create an array of the cards that are not selected so you can
// "hide" only the not selected cards
const notSelectedCards = Array.from(cards).filter(card => card !== selectedCard)
selectedCard.classList.add('card-dragging');
notSelectedCards.forEach(card => card.classList.add('invisible'));
// remove the "invisible" class (and do whatever other
// cleanup on dragend that you want)
selectedCard.addEventListener('dragend', (event) => {
selectedCard.classList.remove('card-dragging');
notSelectedCards.forEach(card => card.classList.remove('invisible'));
}, { once: true});
})
})
* {
box-sizing: border-box;
}
.cards {
display:flex;
justify-content: space-around;
}
.card {
font-family: Arabic;
border-radius: 10%;
font-size: 4em;
text-align:center;
width: 200px;
height: 130px;
background-color: white;
border: 10px solid rgb(255, 85, 0);
}
.card:hover{
cursor: grab;
transform: scale(1.2);
transition: 0.3s;
}
.empty-divs{
display: flex;
justify-content: space-around;
}
.empty-div {
display: flex;
flex-direction: column;
align-items: center;
}
.blank-card {
width: 200px;
height: 130px;
background-color: #f4f4f4;
border-radius: 10%;
text-align:center;
border: 10px solid grey;
}
.invisible {
visibility: hidden;
}
.card-dragging {
opacity: .2;
}
<section class="cards">
<p class="card card-idle" id="أَرْنَب" draggable=true>أَرْنَب</p>
<p class="card card-idle" draggable=true>كِتَاب</p>
<p class="card card-idle" draggable=true>كُرَة</p>
</section>
<section class="empty-divs">
<div class="empty-div">
<img src="http://source.unsplash.com/random/200x200" alt="random" />
<p class="blank-card"></p>
</div>
<div class="empty-div">
<img src="http://source.unsplash.com/random/200x200" alt="random" />
<p class="blank-card"></p>
</div>
<div class="empty-div">
<img src="http://source.unsplash.com/random/200x200" alt="random" />
<p class="blank-card"></p>
</div>
</section>
Related
I have tried drawing 4 vertical equidistant lines as shown in the image. The lines come out of the container when the browser is resized. How can I make it stay within the container irrespective of the browser size? I am new to CSS.
Please let me know if more details are needed on this.
.container {
width: 100%;
position: relative;
display: flex;
padding-right: 100px;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex: 1;
position: relative;
}
.bar {
flex-grow: .8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
position: absolute;
z-index: 1;
margin-left: 100%;
}
.line {
width: 1px;
height: 100%;
position: absolute;
background-color: #000000;
margin-top: 2%;
}
.line1 {
left: 0%;
}
.line2 {
left: 30%;
}
.line3 {
left: 60%;
}
.line4 {
left: 89%;
}
<div class="container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>
The expected result is to have the 1st line drawn at the container's start point, the last line at the end of the container and the two lines in between be equidistant from each other.
The desired result
Try to add parent div for lines and use Flex property for that. So, you get equal distance in all the responsive windows. Below is the sample code for your image.
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width: 100%;
position: relative;
display: flex;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex:1;
position: relative;
}
.bar {
flex-grow: .8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
position: absolute;
z-index: 1;
right: 0;
}
.line-container {
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
height: 100%;
top: 100%;
}
.line {
width: 1px;
height: 100%;
background-color: #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-container">
<div class="line-container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
</div>
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>
</body>
</html>
Here my attempt which utilizing the advantage of flex without position. The usage of position:absolute is actually breaking the flex position. So I restructure your container and css to have as minimal as it can for the syntax to achieve your desired result.
The magic for the equal sizing of each .line is the following:
flex-grow: 1;
Here a very good reference for understanding flex better: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Not sure is it what you want but hope it helps~
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.inner-container {
display: flex;
justify-content: space-between;
width: 100%;
}
.bar {
flex-grow: .8;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
}
.line {
height: 20px;
border-left: 1px solid black;
flex-grow: 1;
}
.line:last-child {
border-right: 1px solid black;
}
<div class="container">
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
I would use margin on your container instead of padding and use space between on your inner container flex (instead of absolute positioning), then you can absolutely position your lines 1/3rd apart and use right 0 for your last line
.container {
width: calc(100% - 100px);
position: relative;
display: flex;
margin-right: 100px;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex-grow: 1;
position: relative;
justify-content: space-between;
}
.bar {
flex-grow: 0.8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
}
.line {
width: 1px;
height: 100%;
position: absolute;
background-color: #000000;
margin-top: 2%;
}
.line1 {
left: 0;
}
.line2 {
left: 33.3333%;
}
.line3 {
left: 66.6667%;
}
.line4 {
right: 0;
}
<div class="container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>
I'm trying to create a progress circle, and get the progress value based on HTML data (data-start and data progress), but there is an error.
The code works fine on one element, but the problem occurs when creating a loop for all elements.
Uncaught Type Error: Cannot read properties of undefined (reading 'start')"
let progressBar = document.getElementsByClassName(".circular-progress");
let valueContainer = document.getElementsByClassName(".value-container");
let progressValue = valueContainer.dataset.start;
let progressEndValue = valueContainer.dataset.progress;
var twoSum = function() {
for (var i = 0; i < progressValue.length; i++) {
for (var j = 0; j < progressEndValue.length; j++) {
let progress = setInterval(() => {
i++;
valueContainer.textContent = `${[i]}%`;
progressBar.style.background = `conic-gradient(
#4d5bf9 ${[i] * 3.6}deg,
#cadcff ${[i] * 3.6}deg
)`;
if (progressValue == progressEndValue) {
clearInterval(progress);
}
}, 30);
}
}
};
.skill .container {
display: grid;
align-items: center;
}
.skill-grid {
display: grid;
grid-template-columns: 190px 190px;
grid-template-rows: 190px 190px;
justify-content: center;
column-gap: 2.5rem;
row-gap: 100px;
margin-right: 2rem;
position: relative;
}
.skill-card {
background-color: var(--white);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 1 1 6rem;
/* padding: 3rem 4rem; */
border-radius: 0.5rem;
transition: transform ease-in-out 0.3s;
}
.skill-card p {
font-size: 1rem;
font-weight: 600;
text-align: center;
padding-top: 10px;
}
.circular-progress {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
display: grid;
place-items: center;
}
.circular-progress:before {
content: "";
position: absolute;
height: 90%;
width: 90%;
background-color: #ffffff;
border-radius: 50%;
}
.value-container {
position: relative;
font-family: var(--main-font);
font-size: 1.3rem;
color: var(--bs-primary);
font-weight: 600;
}
<section class="skill">
<div class="container">
<div class="skill-grid">
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="90">0</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="80">0</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="60">0%</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="50">0%</div>
</div>
<p>UI Design</p>
</div>
</div>
</div>
</section>
You can easily simplify your code:
Better use the querySelectorAll() (and it's single element counterpart querySelector() selection method, since it provides a more versatile css-like selector syntax.
As commented by #Peter B getElementsByClassName()
selects multiple elements (besides it's expect the raw class name without trailing "." dots)
thus, you need to loop through all elements and process each item.
// find all progress circles
let progressBars = document.querySelectorAll(".circular-progress");
progressBars.forEach((progressBar) => {
// select child value container
let valueContainer = progressBar.querySelector(".value-container");
let progressValue = valueContainer.dataset.start;
let progressEndValue = valueContainer.dataset.progress;
let i = 0;
// increment progress angles
let progress = setInterval(() => {
i++;
valueContainer.textContent = `${[i]}%`;
progressBar.style.background = `conic-gradient(
#4d5bf9 ${i * 3.6}deg,
#cadcff ${i * 3.6}deg
)`;
// stop animation
if (i >= progressEndValue) {
clearInterval(progress);
}
}, 10);
});
.skill .container {
display: grid;
align-items: center;
}
.skill-grid {
display: grid;
grid-template-columns: 190px 190px;
grid-template-rows: 190px 190px;
justify-content: center;
column-gap: 2.5rem;
row-gap: 100px;
margin-right: 2rem;
position: relative;
}
.skill-card {
background-color: var(--white);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 1 1 6rem;
/* padding: 3rem 4rem; */
border-radius: 0.5rem;
transition: transform ease-in-out 0.3s;
}
.skill-card p {
font-size: 1rem;
font-weight: 600;
text-align: center;
padding-top: 10px;
}
.circular-progress {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
display: grid;
place-items: center;
}
.circular-progress:before {
content: "";
position: absolute;
height: 90%;
width: 90%;
background-color: #ffffff;
border-radius: 50%;
}
.value-container {
position: relative;
font-family: var(--main-font);
font-size: 1.3rem;
color: var(--bs-primary);
font-weight: 600;
}
<section class="skill">
<div class="container">
<div class="skill-grid">
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="90">0</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="80">0</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="60">0%</div>
</div>
<p>UI Design</p>
</div>
<div class="skill-card">
<div class="circular-progress">
<div class="value-container" data-start="0" data-progress="50">0%</div>
</div>
<p>UI Design</p>
</div>
</div>
</div>
</section>
In the above example we're selecting the outer progress circle elements.
Since the text labels are just child elements, we can select them within the loop.
I'm trying to build an image gallery where when you click on an image, a modal pops up with a larger version of that image, plus a unique title & description.
I can get it to work by hard-coding ids to each image container (id1, id2 etc), but I want it to do this dynamically, rather than me having to write ids for each new image manually.
Everything I've tried so far outputs an uncaught error or similar.
Could anybody please advise (I'm still new to this)!
<div class="gallery content-width">
<div class="img-container">
<img src="./Images/Preview/HH LOW.jpg" alt="Horsehead" id="0" data-original="hh-full.jpg" />
<h4 class="img-title 1">Image title 0</h4>
<p class="image-desc">Description 0</p>
<div class="overlay">
<h3>Veil Nebula</h3>
</div>
</div>
<div class="img-container">
<img src="./Images/Preview/Iris LOW.jpg" alt="Iris" id="1" data-original="iris-full.jpg" />
<h4 class="img-title 1">Image title 1</h4>
<p class="image-desc">Description 1</p>
<div class="overlay">
<h3>Veil</h3>
</div>
</div>
<div class="img-container">
<img src="./Images/Preview/LOIN LOW.jpg" alt="Lion" id="2" data-original="lion-full.jpg" />
<h4 class="img-title 2">Image title 2</h4>
<p class="image-desc">Description 2</p>
<div class="overlay">
<h3>Veil</h3>
</div>
</div>
<div class="img-container">
<img src="./Images/Preview/VEIL LOW.jpg" alt="Veil" id="3" data-original="veil-full.jpg" />
<h4 class="img-title 3">Image title 3</h4>
<p class="image-desc">Description 3</p>
<div class="overlay">
<h3>Veil</h3>
</div>
</div>
</div>
<div class="modal">
<div class="modal-bg">
<img src="" alt="" class="full-img" />
<h4 id=modal-title></h4>
<p id="modal-desc"></p>
</div>
</div>
const modal = document.querySelector(".modal");
const previews = document.querySelectorAll(".gallery img");
const original = document.querySelector(".full-img");
const modalDesc = document.querySelector("#modal-desc");
const modalTitle = document.querySelector("#modal-title");
const imgTitle = document.querySelectorAll(".gallery h4");
const imgDesc = document.querySelectorAll(".gallery p");
previews.forEach(preview => {
preview.addEventListener("click", () => {
modal.classList.add("open");
original.classList.add("open");
const originalSrc = preview.getAttribute("data-original");
original.src = `./Images/full/${originalSrc}`;
modalDesc.textContent = imgDesc[preview.id].textContent;
modalTitle.textContent = imgTitle[preview.id].textContent;
});
});
modal.addEventListener("click", (e) => {
if (e.target.classList.contains("modal")) {
modal.classList.remove("open");
original.classList.remove("open");
}
});
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
grid-gap: 2em;
align-items: center;
justify-content: center;
}
.img-container img {
object-fit: cover;
}
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: all 0.25s ease-in;
}
.overlay h3 {
color: var(--textColour);
font-family: 'Oxygen', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 400;
font-size: 1.25em;
}
img:hover+.overlay {
opacity: 1;
}
/*MODAL*/
.modal {
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: all ease-in-out 0.25s;
}
.modal-bg {
background-color: rgb(184, 184, 184);
width: 85%;
height: 85%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* border-radius: 1em; */
display: flex;
padding: 2em;
gap: 2em;
}
.modal p,
.modal h4 {
color: rgb(143, 44, 44);
font-size: 2rem;
bottom: 5%;
left: 50%;
}
.modal.open {
opacity: 1;
pointer-events: all;
}
I have a simple section that contains five elements on default the first element background is red (active element) now I want when u click any of the remaining elements to change the background color to red, and the remaining elements to have white background color using vanilla js.
Problem: When I click any of the remaining elements is set to red but the previous active element is still red; live demo
My solution
HTML
<div id="panels">
<div class="panel active">First</div>
<div class="panel">second</div>
<div class="panel">third</div>
<div class="panel">fouth</div>
<div class="panel">Fith</div>
</div>
CSS
#panels{
display: flex;
justify: space-between;
align-items: center
}
.panel{
display: flex;
justify-content: space-between;
align-items: center;
width: 100px;
height: 100px;
background: white;
color: black;
font-size: 24px;
text-align: center;
margin: 0px auto;
cursor: pointer;
}
.active{
background: red;
}
Js
var panel = document.getElementById('panels'); // Parent
panel.addEventListener('click', function (e) {
var target = e.target; // Clicked element
while (target && target.parentNode !== panel) {
target = target.parentNode; // If the clicked element isn't a direct child
if (!target) { return; } // If element doesn't exist
}
if (target.tagName === 'DIV') {
target.classList.toggle('active');
} else {
console.log('love')
}
});
What do I need to change here to get this working?
var panels = document.querySelectorAll("#panels > .panel")
panels.forEach(each=>{
each.onclick = function(){
panels.forEach(ss=>ss.classList.remove("active")) // removing active from all
each.classList.add("active") // assigning active to selected
}
})
.panel{
display: flex;
justify-content: space-between;
align-items: center;
width: 100px;
height: 100px;
background: white;
color: black;
font-size: 24px;
text-align: center;
margin: 0px auto;
cursor: pointer;
}
.active{
background: red;
}
<div id="panels">
<div class="panel active">First</div>
<div class="panel">second</div>
<div class="panel">third</div>
<div class="panel">fouth</div>
<div class="panel">Fith</div>
</div>
Just for fun and educational purposes, here's a solution with no JavaScript. Just hidden HTML radio buttons and a CSS trick.
#panels {
display: flex;
justify: space-between;
align-items: center
}
.panel {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background: white;
color: black;
font-size: 24px;
text-align: center;
margin: 0px auto;
cursor: pointer;
}
[type=radio]:checked + .panel {
background: red;
}
[type=radio] {
display: none;
}
<div id="panels">
<input type="radio" name="panel" id="panel1" checked />
<label class="panel" for="panel1">First</label>
<input type="radio" name="panel" id="panel2" />
<label class="panel" for="panel2">second</label>
<input type="radio" name="panel" id="panel3" />
<label class="panel" for="panel3">third</label>
<input type="radio" name="panel" id="panel4" />
<label class="panel" for="panel4">fouth</label>
<input type="radio" name="panel" id="panel5" />
<label class="panel" for="panel5">Fith</label>
</div>
A modern (not supported in IE) take on panels.
Vanilla JavaScript supported in all browsers.
The Custom Element <div-panels> process the click Event
customElements.define("div-panels", class extends HTMLElement{
connectedCallback(){
this.onclick = (evt) => {
this.querySelector("[selected]")?.removeAttribute("selected");
evt.target.setAttribute("selected","selected");
}
}
});
div-panels > div {
display: inline-block;
width: 100px;
height: 100px;
background: pink;
}
div-panels > div[selected] {
background: green;
}
<div-panels>
<div>First</div>
<div>Second</div>
<div selected>Third</div>
<div>Fourth</div>
<div>Fith</div>
</div-panels>
const Elements = document.querySelectorAll(".panel");
Elements.forEach((el) => {
el.onclick = () => {
if (el.classList.contains("active")) {
// if you want to remove the red
el.classList.remove("active");
} else {
let CurrentActive = document.querySelector(".active");
CurrentActive ?CurrentActive.classList.remove("active") :""
el.classList.add("active");
}
};
});
.panel{
display: flex;
justify-content: space-between;
align-items: center;
width: 100px;
height: 100px;
background: white;
color: black;
font-size: 24px;
text-align: center;
margin: 0px auto;
cursor: pointer;
}
.active{
background: red;
}
<div id="panels">
<div class="panel active">First</div>
<div class="panel">second</div>
<div class="panel">third</div>
<div class="panel">fouth</div>
<div class="panel">Fith</div>
</div>
I'm trying to apply classList.add during the mouseover and classList.remove during the mouseout. The class which should be added or removed is ".portraitBG". It has a #32353F for the background.
I don't know why this isn't working when I tell the code to apply this function to all my html class ".portrait.flex". I don't want to use jQuery at this moment.
See the whole code on https://codepen.io/gabrielacaesar/pen/Pmrpzm
My Javascript:
var portrait = document.querySelectorAll(".portrait.flex")
portrait.addEventListener("mouseover", function() {
portrait.classList.add("portraitBG");
});
portrait.addEventListener("mouseout", function() {
portrait.classList.remove("portraitBG");
});
My HTML:
<section class="container">
<div class="portraits flex">
<a class="portrait flex one" href="#" alt="Foto:">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Eliseu Padilha
</p>
<p class="portraitGovernment">
governo Michel Temer
</p>
</div>
</a>
<a class="portrait flex two" href="#">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Eva Chiavon
</p>
<p class="portraitGovernment">
governo Dilma Rousseff
</p>
</div>
</a>
<a class="portrait flex three" href="#">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Jaques Wagner
</p>
<p class="portraitGovernment">
governo Dilma Rousseff
</p>
</div>
</a>
</section>
My CSS:
a {
text-decoration: none;
cursor: pointer;
}
.container {
padding: 0;
max-width: 1500px;
margin: 0 auto;
}
.flex {
display: flex;
}
.portraits {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 80px;
}
.portrait {
max-width: 800px;
max-height: 340px;
flex-direction: column;
text-align: center;
padding-top: 30px;
}
.portraitBG {
background: #32353F;
border-radius: 5%;
}
.portrait img {
max-width: 800px;
max-height: 200px;
}
.portraitContent {
border: 3px #32353F solid;
border-radius: 5%;
background: #00EC85;
}
.portraitName {
font-size: 200%;
color: white;
padding-top: 7px;
}
.portraitGovernment {
font-size: 100%;
color: #32353F;
padding-bottom: 7px;
}
better to do it in CSS
.portrait:hover{
background: #32353F;
border-radius: 5%;
}