I wanted to use @media (hover: hover)
but I could not get it to work. I have three images in a row that display a text overlay when they are hovered over with a mouse. Currently, whenever I add @media (hover: hover)
and switch to a mobile view, the images remain unaltered. I either want to get @media (hover: hover)
working or try something else entirely. This is my first time designing a website and using stack overflow, so I am a little out of my depth. I did not see any questions already posted that were similar enough to my problem to help me achieve my goal. My CSS is below.
.card-container
{
margin-top: 10%;
}
.card-container h1
{
font-family: merriweather;
}
.card
{
position: relative;
overflow: hidden;
}
.card:before
{
position: absolute;
content: '';
width: 80%;
height: 220%;
background: rgba(217, 153, 35, 0.7);
top: -50%;
left: -100%;
z-index: 1;
transform: rotate(25deg);
transform-origin: center top 0;
transition: .5s;
}
.card:hover:before
{
left: 10%;
}
.card img
{
width: 100%;
height: auto;
}
.card-text
{
width: 100%;
padding: 0 20px;
position: absolute;
top: -100%;
color: #ffff;
left: 0;
z-index: 2;
transition: 1.1s;
}
.card-text h3
{
font-family: merriweather;
font-weight: 900;
}
.card-text h5
{
font-family: lora;
}
.card:hover .card-text
{
top: 80px;
}
2
Answers
In mobile, you need a combination of hover and active to hover element.
So, you need to declare in your css like.
You just need to use combine CSS selector properties in responsive media queries.
i.e.- .class:hover, .class:active, .class: focus
please refer this link for live demo to understand in details.
https://jsfiddle.net/yudizsolutions/nc2fh7kp/