Мобильная версияСвойство before в галерее последнего раздела в поле div-image
Я беру заботиться обо всех решениях, таких как содержимое или положение относительно родителя и абсолютное для дочернего элемента, но я все равно не вижу ::before.
Я не знаю, почему он не появляется
Я все еще изучаю Frontend и вижу эту реализацию в видео с YouTube, она отлично работает для видео, но я не могу, почему??
HTML
3MJ
[*]
3MJ
Welcome, To 3MJ Store World
Here you will find your dream, your goals and what do you hope. We share happiness.
ARTICLE
Test Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
Read More
Test Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
Read More
Test Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
Read More
Test Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
Read More
Test Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
Read More
Test Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
Read More
Test Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
Read More
Test Title
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
Read More
GALLERY
CSS
/* Start Public Config */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--main-color: #2196f3;
--main-color-alt: #1787e0;
--main-transition: 0.3s;
--main-padding: 100px;
--section-background-color: #ececec;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Cairo", sans-serif;
}
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.main-title {
margin: 0 auto 100px;
border: 1px solid black;
padding: 10px 20px;
font-size: 30px;
width: fit-content;
position: relative;
z-index: 1;
transition: var(--main-transition);
}
.main-title::before,
.main-title::after {
content: "";
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: var(--main-color);
top: 50%;
transform: translateY(-50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.main-title::before {
left: -25%;
}
.main-title::after {
right: -25%;
}
.main-title:hover {
color: white;
border: 1px solid white;
transition-delay: 0.5s;
}
.main-title:hover::before {
z-index: -1;
animation: left-move 0.5s linear forwards;
-webkit-animation: left-move 0.5s linear forwards;
}
.main-title:hover::after {
z-index: -1;
animation: right-move 0.5s linear forwards;
-webkit-animation: right-move 0.5s linear forwards;
}
/* End Public Config */
/* Start Header */
.header {
background-color: white;
position: relative;
box-shadow: 0 0 10px #ddd;
--main-height: 72px;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.header .container .logo {
color: var(--main-color);
font-size: 26px;
font-weight: bold;
height: var(--main-height);
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 767px) {
.header .container .logo {
width: 100%;
height: 50px;
}
}
.header .container .main-nav {
display: flex;
}
@media (max-width: 767px) {
.header .container .main-nav {
margin: auto;
}
}
.header .container .main-nav li:hover .mega-menu {
opacity: 1;
top: 100%;
z-index: 100;
}
.header .container .main-nav>li>a {
display: flex;
justify-content: center;
align-items: center;
height: var(--main-height);
position: relative;
color: black;
padding: 0 30px;
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
overflow: hidden;
}
@media (max-width: 767px) {
.header .container .main-nav>li>a {
padding: 10px;
font-size: 14px;
height: 40px;
}
}
.header .container .main-nav>li>a::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: var(--main-color);
bottom: 0;
left: -100%;
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.header .container .main-nav>li>a:hover {
color: var(--main-color);
background-color: #fafafa;
}
.header .container .main-nav>li>a:hover::before {
left: 0;
}
/* Start MegaMenu */
.header .container ul li .mega-menu {
background-color: white;
position: absolute;
width: 100%;
left: 0;
padding: 30px;
border-bottom: 3px solid var(--main-color);
z-index: -1;
display: flex;
gap: 30px;
top: 200%;
opacity: 0;
transition: top var(--main-transition), opacity var(--main-transition);
-webkit-transition: top var(--main-transition), opacity var(--main-transition);
-moz-transition: top var(--main-transition), opacity var(--main-transition);
-ms-transition: top var(--main-transition), opacity var(--main-transition);
-o-transition: top var(--main-transition), opacity var(--main-transition);
}
@media (max-width: 767px) {
.header .container ul li .mega-menu {
flex-direction: column;
gap: 0;
padding: 5px;
}
}
.header .container ul li .mega-menu .image img {
max-width: 100%;
}
@media (max-width: 991px) {
.header .container ul li .mega-menu .image {
display: none;
}
}
.header .container .main-nav li .mega-menu .links {
min-width: 250px;
flex: 1;
}
.header .container .main-nav li .mega-menu .links li {
position: relative;
}
.header .container .main-nav li .mega-menu .links li:not(:last-child) {
border-bottom: 1px solid #e9e6e6;
}
@media (max-width: 767px) {
.header .container .main-nav li .mega-menu .links:first-of-type li:last-child {
border-bottom: 1px solid #e9e6e6;
}
}
.header .container .main-nav li .mega-menu .links li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #fafafa;
z-index: -1;
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.header .container .main-nav li .mega-menu .links li:hover:before {
width: 100%;
}
.header .container .main-nav li .mega-menu .links li a {
color: var(--main-color);
padding: 15px;
display: block;
font-size: 18px;
font-weight: bold;
}
.header .container .main-nav li .mega-menu .links li a i {
margin-right: 10px;
}
/* End MegaMenu */
/* End Header */
/* Start Landing */
.landing {
position: relative;
}
.landing::before {
content: "";
position: absolute;
left: 0;
top: -30px;
width: 100%;
height: 100%;
background-color: #ececec;
z-index: -1;
transform-origin: top left;
transform: skewY(-6deg);
-webkit-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
-o-transform: skewY(-6deg);
}
.landing .container {
min-height: calc(100vh - 72px);
display: flex;
align-items: center;
padding-bottom: 120px;
}
@media (max-width: 767px) {
.landing .container {
min-height: calc(100vh - 90px);
}
}
.landing .text {
flex: 1;
}
@media (max-width: 991px) {
.landing .text {
text-align: center;
}
}
.landing .text h1 {
font-size: 40px;
margin: 0;
letter-spacing: -2px;
}
@media (max-width: 767px) {
.landing .text h1 {
font-size: 30px;
}
}
.landing .text p {
font-size: 24px;
line-height: 1.7;
margin: 5px 0 0;
color: #666;
max-width: 500px;
}
@media (max-width: 991px) {
.landing .text p {
margin: 10px auto auto;
}
}
@media (max-width: 767px) {
.landing .text p {
font-size: 15px;
}
}
.landing .image img {
position: relative;
width: 600px;
animation: up-and-down 5s linear infinite;
-webkit-animation: up-and-down 5s linear infinite;
}
@media (max-width: 991px) {
.landing .image img {
display: none;
}
}
.landing .go-down {
color: var(--main-color);
position: absolute;
bottom: 30px;
left: 50%;
transition: var(--main-transition);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.landing .go-down i {
animation: bouncing 1.5s infinite;
-webkit-animation: bouncing 1.5s infinite;
}
.landing .go-down:hover {
color: var(--main-color-alt);
}
/* End Landing */
/* Start Article */
.article {
padding-top: var(--main-padding);
padding-bottom: var(--main-padding);
}
.article .container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 40px;
}
.article .container .box {
box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
background-color: white;
overflow: hidden;
border-radius: 5px;
transition: transform var(--main-transition), box-shadow var(--main-transition);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-transition: transform var(--main-transition), box-shadow var(--main-transition);
-moz-transition: transform var(--main-transition), box-shadow var(--main-transition);
-ms-transition: transform var(--main-transition), box-shadow var(--main-transition);
-o-transition: transform var(--main-transition), box-shadow var(--main-transition);
}
.article .container .box:hover {
transform: translateY(-10px);
box-shadow: 0 2px 15px rgb(0 0 0 / 20%);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
.article .container .box img {
max-width: 100%;
}
.article .container .box .content {
padding: 20px;
}
.article .container .box .content h3 {
margin: 0;
}
.article .container .box .content p {
margin: 10px 0 0;
line-height: 1.5;
color: #777;
}
.article .container .box .info {
padding: 20px;
border-top: 1px solid #e6e6e7;
display: flex;
justify-content: space-between;
align-items: center;
}
.article .container .box .info a {
color: var(--main-color);
font-weight: bold;
}
.article .container .box .info i {
color: var(--main-color);
}
.article .container .box:hover .info i {
animation: arrow-move 0.5s linear infinite;
-webkit-animation: arrow-move 0.5s linear infinite;
}
/* End Article */
/* Start Gallery */
.gallery {
padding-top: var(--main-padding);
padding-bottom: var(--main-padding);
position: relative;
background-color: var(--section-background-color);
}
.gallery .container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 40px;
}
.gallery .container .box {
padding: 15px;
background-color: white;
box-shadow: 0px 20px 20px 0px rgb(0 0 0 / 13%), 0px 2px 4px 0px rgb(0 0 0 / 12%);
}
.gallery .container .box .image {
position: relative;
}
.gallery .container .box .image::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: red;
width: 10px;
height: 10px;
/* opacity: 0; */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.gallery .container .box img {
max-width: 100%;
}
/* End Gallery */
/* Start Animation */
@keyframes up-and-down {
0%,
100% {
top: 0;
}
50% {
top: -50px;
}
}
@keyframes bouncing {
0%,
10%,
20%,
50%,
80%,
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
40%,
60% {
transform: translateY(-15px);
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
}
}
@keyframes left-move {
50% {
left: 0;
width: 15px;
height: 15px;
}
100% {
width: 50%;
height: 100%;
left: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}
}
@keyframes right-move {
50% {
right: 0;
width: 15px;
height: 15px;
}
100% {
width: 50%;
height: 100%;
right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
}
}
@keyframes arrow-move {
100% {
transform: translateX(10px);
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
}
}
/* End Animation */
Подробнее здесь: https://stackoverflow.com/questions/784 ... ementation
