I want to cover the element with the ::after pseudo element, but when I add child elements div element, it pushes the ::after down.
I want to keep the inline block display of the child element. When the user hovers, the transition shows the child element under the ::after element.
Works with no child elements but when I add the text in .subsect-text pushes pseudo element down.
[class^="sect__"] {
display: flex;
justify-content: space-between;
width: 100%;
height: 80vh;
border: 1px solid black;
margin-bottom: 20vh;
/* background: linear-gradient(to right, var(--light-purple), var(--dark-purple) 50%, var(--dark-purple) 75%); */
}
[class^='container__subsect']{
border: 1px solid black;
width: calc(100%/3);
}
[class^='container__subsect']::after{
font-size: 4rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: #fff;
overflow-y: hidden;
transition: all 0.3s;
}
.container__subsect-1::after{
content: "Networking";
}
.container__subsect-2::after{
content: "JavaScript";
}
.container__subsect-3::after{
content: "Endpoint Management";
}
[class^='container__subsect']:hover::after{
height: 0%;
content: "";
}
.subsect-text {
text-align: left;
font-size: 2rem;
display: inline;
/* position: absolute; */
}<section class="sect__1">
<div class="container__subsect-1">
<div class="subsect-text">
Networking with meraki is a way of using cloud-based technology to manage and monitor networks of devices, such as routers, switches, cameras, and access points. Meraki provides a dashboard that allows users to configure, troubleshoot, and secure their networks from anywhere.
</div>
</div>
<div class="container__subsect-2">
<div class="subsect-text">
Javascript is a programming language that runs in web browsers and enables dynamic and interactive web pages. Javascript can also be used for server-side development, mobile applications, desktop applications, and game development. Javascript is one of the most popular and widely used languages in the world.
</div>
</div>
<div class="container__subsect-3">
<div class="subsect-text">
Endpoint management is the process of securing and maintaining the devices that connect to a network, such as laptops, smartphones, tablets, and printers. Endpoint management involves installing software updates, enforcing security policies, detecting and resolving threats, and providing remote support.
</div>
</div>
</section>One approach is as follows, with explanatory comments in the code:
/*
a simple reset to remove all browser default padding and margins,
and setting the box-sizing algorithm to border-box, which includes
border-widths and padding in the assigned size:
*/
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* unchanged: */
section {
display: flex;
justify-content: space-between;
width: 100%;
height: 80vh;
border: 1px solid black;
margin-bottom: 20vh;
}
.container__subsect {
border: 1px solid #000;
/* rather than calculating a width, I set the flex-basis
(the size of the element on the inline-axis) to be
30% of its parent; this allows for some spacing between
adjacent elements and also to give an appromately same
size to the siblings):
*/
flex-basis: 30%;
/*
a personal preference to move the content away from the
border, to give a slightly less-cramped visual layout:
*/
padding: 0.5rem;
/*
in order to ensure that the pseudo-element can be positioned
relative to its parent:
*/
position: relative;
}
.container__subsect::after {
/*
setting a partially transparent background-color, in order
to see that there's content behind the titles; obviously
adjust if you don't want that translucency:
*/
background-color: #fff6;
/*
displaying the value of the data-title attribute as the
content:
*/
content: attr(data-title);
/*
adding a small blur with the backdrop-filter property,
and the CSS blur() function; again: remove if this isn't
desired:
*/
backdrop-filter: blur(3px);
font-size: 2rem;
/*
using the inset property to set the top, right, bottom and
left positions with one value (all to 0):
*/
inset: 0;
/*
preventing the pseudo-element being visible outside of the
it's parent element:
*/
overflow: hidden;
position: absolute;
text-align: center;
transition: inset 0.4s ease-in;
}
.container__subsect:hover::after {
/*
I used calc() to show how it could be used to keep the
"title" visible if you wished to do so, this is
unfortunately a magic number so I'm not entirely keen
on the idea; if you want the "title" to slide entirely
out of view, then use the following instead:
inset: 100% 0 0 0;
*/
inset: calc(100% - 4rem) 0 0 0;
}<section class="sect__1">
<!--
below I've made two changes (these aren't required, but does simplify things):
1. added a "container__subject" class, so that *all* of these elements
can be selected with one selector that works more efficiently (though
this is a micro-optimisation) than using the attribute-starts-with
selector, and should run better on older/slower hardware; also it
allows you to add, insert, prepend or append new classes without
having to worry about the selector, and
2. I've added the "data-title" attribute, setting its value to be equal
to the relevant subject of the descendant .subsect-text element
-->
<div class="container__subsect container__subsect-1" data-title="Networking">
<div class="subsect-text">
Networking with Meraki is a way of using cloud-based technology to manage and monitor networks of devices, such as routers, switches, cameras, and access points. Meraki provides a dashboard that allows users to configure, troubleshoot, and secure their networks from anywhere.
</div>
</div>
<div class="container__subsect container__subsect-2" data-title="JavaScript">
<div class="subsect-text">
JavaScript is a programming language that runs in web browsers and enables dynamic and interactive web pages. JavaScript can also be used for server-side development, mobile applications, desktop applications, and game development. JavaScript is one of the most popular and widely used languages in the world.
</div>
</div>
<div class="container__subsect container__subsect-3" data-title="Endpoint management">
<div class="subsect-text">
Endpoint management is the process of securing and maintaining the devices that connect to a network, such as laptops, smartphones, tablets, and printers. Endpoint management involves installing software updates, enforcing security policies, detecting and resolving threats, and providing remote support.
</div>
</div>
</section>References: