Using CSS to show and hide some elements - html

Question

This page is a grid container with some images as posts-list, header, and left menu:
JSFiddle1
When I hover over images two links: "comments" and "view posts" would appear. I want to use the CSS and when I click on either of these two it leads me to something like this:
JSFiddle
I wanted to use display: none; but I don't know where should I put it.

Answer 1

if I understand your question correctly, this is a possible solution to your problem.
function changeContainer(){
if($('.grid-container-before').css('visibility') === 'visible') {
$('.grid-container-before').css('visibility','hidden');
$('.grid-container-before').css('display','none');
$('.grid-container-after').css('visibility','visible');
$('.grid-container-after').css('display','grid');
}
}
body {
padding-top: 73px;
overflow-y: hidden;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* ------------ PAGE SCROLLBAR ------------ */
*::-webkit-scrollbar {
width: 2px;
}
*::-webkit-scrollbar-track {
background: white;
}
*::-webkit-scrollbar-thumb {
background-color: grey;
border-radius: 20px;
height: 2px;
}
/* ------------ navbar ------------ */
.header {
display: flex;
position: fixed;
background-color: white;
width: 100%;
justify-content: space-between;
z-index: 7;
font-family: Libre Franklin;
top: 0;
left: 0;
}
.header-flex-list {
display: flex;
margin-top: 10px;
justify-content: flex-end;
flex: 50%;
}
.header-list {
list-style: none;
display: flex;
}
.header-list a {
text-decoration: none;
color: #000;
font-size: 12px;
padding: 0px 20px 0px 20px;
}
.top-icon-container {
display: flex;
padding: 10px 50px;
flex-wrap: wrap;
}
.icon-column {
width: 10%;
border-radius: 50px;
}
.p-column {
width: 28%;
padding-left: 10px;
}
#top-bar-icon {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 50px;
border: 2px solid #73AD21;
}
/* ------------ LEFT MENU ------------ */
.container {
display: flex;
justify-content: space-between;
height: 100vh;
}
.left-menu {
width: 18%;
order: 1;
height: 100vh;
/* overflow-y: scroll; */
padding: 0px 0px 10px 45px;
}
.menu-list {
list-style: none;
line-height: 2.5rem;
/* display: flex;
flex-direction: column; */
margin-left: -25px;
}
.menu-list a {
text-decoration: none;
}
/* ------------ MAIN POSTS ------------ */
.main-posts {
width: 100%;
order: 2;
padding: 0px 20px 0px 20px;
overflow-y: auto;
text-align: center;
scrollbar-width: thin;
scrollbar-color: grey white;
}
/* ------------ MAIN POSTS LISTS ------------ */
.grid-container-before {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
grid-gap: 1rem;
width: 100%;
margin: 0 auto;
margin-bottom: 6rem;
visibility: visible;
}
.grid-container-after {
display: grid;
grid-template-columns: 80% 1fr;
grid-gap: 10px;
height: 300px;
visibility: hidden;
display:none;
}
.box {
background-color: #20262e;
color: #fff;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
.posts {
display: flex;
}
.img__wrap {
position: relative;
}
.posts-image {
height: 350px;
width: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: white;
color: #000;
visibility: hidden;
opacity: 0;
/* transition effect. not necessary */
transition: opacity 0.2s, visibility 0.2s;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.text a {
color: #000;
text-decoration: none;
padding-right: 20px;
}
[data-title]::after {
content: attr(data-title);
background-color: #000;
color: #fff;
font-size: 13px;
;
position: absolute;
padding: 10px;
bottom: -3.6em;
left: 50%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title]:hover::after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title] {
position: relative;
}
.img__wrap:hover .overlay {
visibility: visible;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link href="//fonts.googleapis.com/css?family=Karla|Syne|Libre+Franklin|Bai+Jamjuree|Chakra+Petch|Gotu" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!------------ TOP MENU ------------>
<header id="header" class="header">
<div id="top-container" class="top-icon-container">
<div class="icon-column">
<img id="top-bar-icon" src="https://s4.uupload.ir/files/top-bar-icon_ensh.png" alt="my logo:)">
</div>
<div class="p-column">
<p>Name it what u want!</p>
</div>
</div>
<div class="header-flex-list">
<ul class="header-list">
<li>TERMS OF USE</li>
<li>HAVE A QUESTION</li>
<li>ABOUT ME</li>
</ul>
</div>
</header>
<body>
<div class="container">
<!------------ LEFT MENU ------------>
<nav id="menu" class="left-menu">
<p style="text-decoration: none; color: black;">Filter by:</p>
<ul class="menu-list">
<li><a>Popular pages</a></li>
<li><a>About pages</a></li>
<li><a>Character pages</a></li>
<li><a>Music pages</a></li>
</ul>
</nav>
<!------------ MAIN POSTS ------------>
<section id="main-content" class="main-posts">
<div class="grid-container-before">
<div class="img__wrap">
<img class="posts-image" src="https://www.webdevelopersnotes.com/wp-content/uploads/random-image-display-using-javascript-2.png" alt="project" />
<div class="overlay">
<div class="text">
<button href="#" data-title="comments" onclick="changeContainer()">
<i class="fa fa-comments fa-fw"></i>comment</button>
<button href="#" data-title="view post" onclick="changeContainer()">
<i class="fa fa-external-link fa-fw"></i></button>
</div>
</div>
</div>
</div>
<div class="grid-container-after">
<div class="box a">A</div>
<div class="box b">B</div>
</div>
</section>
</div>
</body>