I want to know how I can make the background image of something the selection area because my background image is a triangle and I want the selection area to be a triangle. (CSS)
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>h1{background-image: url(image.png)}</style>
<body>
<h1>Hello</h1>
</body>
</html>
i want that image.png to be the hovering/selection/trigger area for that link, i want this because i have a triangle as a background image and i want the hovering area to be a triangle as well.
then you'll have to use a : selector in your css
For example: NOTE . for Classes and # for ids
.example-image: hover {
//style to show when mouse hovers
}
Resources:
https://www.w3schools.com/cssref/sel_hover.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
https://www.w3schools.com/howto/howto_css_image_overlay.asp
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Related
I would like to get a hover effect on my image, when the user goes over the image a background should appear on the image with some text (see example below). My css doesn't look like it at all unfortunately. It is not in the middle and the image is not round but more like an egg.
My question now is, how can I use CSS to make the image so that it is round and when going over it the text is displayed nicely in the middle.
I also use Bootstrap as an additional library, if it should be easier.
What I have:
What I want:
Pic.js
<div class="container-profilepic">
<img src="./image.png" width="150" height="150" alt="Profibild" className="photo-preview"></img>
<div class="middle-profilepic">
<div class="text-profilepic"><i class="fas fa-camera"></i>
<div class="text-profilepic">Change it
</div>
</div>
Photo.css
.photo-preview{
width: 100% !important;
max-width: 125px !important;
height: 100% !important;
max-height: 125px!important;
border-radius: 50% !important;
}
.middle-profilepic {
transition: .5s ease;
opacity: 0;
position: absolute;
text-align: center;
}
.container-profilepic:hover .photo-preview {
opacity: 0.3;
}
.container-profilepic:hover .middle-profilepic {
opacity: 1;
}
.text-profilepic {
color: green;
font-size: 16px;
}
I checked this question befor out How do I add animated text on these images when I hover my cursor without changing current style?
Unfortunately it didn't help me.
I tried it before with top, left, postion...
.middle-profilepic {
transition: .5s ease;
opacity: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The result
So I removed it, because the result was much closer at what I want
Solution
You need to set the parent div with position: relative and the inner content (icon + image) as position: absolute elements, stretching to fit.
If you need the avatar image to ba an img tag you can use object-fit: cover in CSS (It has wide support nowadays: https://caniuse.com/?search=object-fit).
Tips
be careful the HTML you posted is invalid, has some broken tags
I vividly suggest you move away from using heavily !important within your CSS
Working example
body {
font-family: sans-serif;
}
.profilepic {
position: relative;
width: 125px;
height: 125px;
border-radius: 50%;
overflow: hidden;
background-color: #111;
}
.profilepic:hover .profilepic__content {
opacity: 1;
}
.profilepic:hover .profilepic__image {
opacity: .5;
}
.profilepic__image {
object-fit: cover;
opacity: 1;
transition: opacity .2s ease-in-out;
}
.profilepic__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.profilepic__icon {
color: white;
padding-bottom: 8px;
}
.fas {
font-size: 20px;
}
.profilepic__text {
text-transform: uppercase;
font-size: 12px;
width: 50%;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />
<div class="profilepic">
<img class="profilepic__image" src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e" width="150" height="150" alt="Profibild" />
<div class="profilepic__content">
<span class="profilepic__icon"><i class="fas fa-camera"></i></span>
<span class="profilepic__text">Edit Profile</span>
</div>
</div>
Solution
Create a container with relative position and fixed height and width
Add an image as a background image respective to the container size
Add content with position: absolute
solution using bootstrap-5
.container-profilepic {
width: 150px;
height: 150px;
}
.photo-preview {
background-image: url( https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 );
background-size: cover;
background-position: center;
}
.middle-profilepic {
background-color: rgba( 255,255,255, 0.69 );
}
.container-profilepic:hover .middle-profilepic {
display: flex!important;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
</head>
<body>
<div class="container-profilepic card rounded-circle overflow-hidden">
<div class="photo-preview card-img w-100 h-100"></div>
<div class="middle-profilepic text-center card-img-overlay d-none flex-column justify-content-center">
<div class="text-profilepic text-success">
<i class="fas fa-camera"></i>
<div class="text-profilepic">Change it</div>
</div>
</div>
</div>
</body>
</html>
.image {
position: relative:
}
.text-div {
position: abolute;
top: 10px;
left:40%;
}
Also img tag it's self-closing tag
When the card is flipped, the front face is turned to the back and hidden, however, the back face is turned but not made visible. My intention is to have whichever side of the card is front-facing made visible. I have tried a number of variations of placing the backface-visibility attribute within different classes/ids but to no avail.
Below is my current code:
body {
background-image: url("imgs/Bike-Logo.jpg");
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
background: inherit;
}
.card {
width: 350px;
height: 500px;
background: inherit;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -250px;
border-radius: 8px;
background-color: #707075;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card::before {
content: "";
position: absolute;
top: -25px;
left: -25px;
bottom: 0;
right: 0;
/*frosted div effect*/
background: inherit;
box-shadow: 100px 0px 20px 200px rgba(255,255,255,0.5);
filter: blur(20px);
}
.flip_card_back {
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
.flip_card_front, .flip_card_back {
backface-visibility: hidden;
}
.sign_up_form {
position: relative;
margin: 10%;
background-color: red;
}
.sign_in_form {
position: relative;
margin: 10%;
background-color: blue;
}
.card figure {
color: white;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Login Page</title>
</head>
<body>
<div class="container">
<div id="card">
<div class="flip_card_front">
<form>
<div class="sign_in_form">
<figure>Front</figure>
</div>
</form>
</div>
<div class="flip_card_back">
<form >
<div class="sign_up_form" >
<figure>Back</figure>
</div>
</form>
</div>
</div>
</div>
<button id="flip">Sign In -></button>
<script src="javascript.js"></script>
</body>
</html>
I am in quite a pickle...
So here is my situation, I want to make a moving animation when the mouse hovers over it.
When this happens, I would like text that is layered over this div to remain in the same position.
In my setup, I have a parent div that controls the yellow div inside it when the mouse hovers over it. Also inside the parent div is the text that I would like to position over the edge of the yellow div and remain static during the animation.
html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
css:
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
width: 100%
}
.yellow {
display: inline-block;
left: 20%;
height: 7%;
position: relative;
transition: transform 0.4s ease;
transform-origin: right;
transform: scaleX(0px);
width: 80%;
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
This is what it is making
No matter what I do I simply cannot find a way to put the text over the moving divider without it:
Not staying on the same x plane as the moving div
Being transformed with the moving div
Wish this is what you looking for. If you didn't want the text to move you should add position absolute to your yellow div and also relative position to your parent div. then you can position the yellow div as you want. Also, you should put the width: 80%; before your scaleX(0) so that transform can work and also you should give the scaleX transform, 0 as a value, not 0px.
Run the snippet to see the result.
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
#yellow-con {
background-color: #000000;
height: auto;
position: relative;
padding: 10px;
}
.yellow {
position: absolute;
left: 20%;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 80%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(.75);
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Lorem</h1>
<br>
<h2>ipsum dolor</h2>
<br><br><br>
<div>
<div id="yellow-con">
<div><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
I have made a rough snippet for the use case please build on top of it.
.relative{
position:'relative';
width:150px;
height:50px;
}
.static{
position:absolute;
}
.hoverable{
width:100%;
height:100%;
background-color:yellow;
transition:transform 1s;
}
.hoverable:hover{
transform:translate(150px,0px);
}
<div class='relative'>
<div class='static'>Static Text</div>
<div id='yellow' class='hoverable'/>
</div>
p {
display: inline;
font-family: 'Crimson Text';
color: #faf3dd;
font-size:5vh;
z-index: 2;
}
/*added this class*/
.child-1 {
position: absolute;
z-index: 10;
}
#yellow-con {
background-color: #000000;
position: relative;
height: 25px;
}
.yellow {
position: absolute;
top: 0;
height: 100%;
transition: transform 0.4s ease;
transform-origin: right;
width: 100%;
transform: scaleX(0);
background-color: #fccd34;
z-index: 1;
}
#yellow-con:hover .yellow {
transform: scaleX(1);
}
#yellow-con:hover b {
color: black;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div id="yellow-con">
<div class="child-1"><p><b>button</b></p></div>
<div class="yellow"></div>
</div>
</div>
</body>
</html>
*I'm using Bootstrap CSS grid and reset for this exercise. I'm adding the contents in WordPress, using Gutenberg. Please bear with me, my explanation might be difficult to understand - English isn't my first language.
--
So I've created a container with two borders on top to create an upside-down pyramid. This shows the previous container's background colour and image. I've also added an image with a diagonal gradient within the parent container as shown below:
/*------------------------------------*\
MAIN
\*------------------------------------*/
.header {
position: relative;
background: #2f2655;
height: 500px;
}
.header:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
.header .logo {
text-align: center;
position: absolute;
left: 0;
bottom: 30px;
width: 100%;
padding: 20px 0;
z-index: 5;
}
.header .logo a {
display: inline-block;
margin: 0 auto;
text-decoration: none;
}
.header .logo a h1 {
color: #fff;
}
.section {
position: relative;
overflow: hidden;
margin-top: -20px;
padding-top: 20px;
}
.section .surround {
position: relative;
padding-bottom: 40px;
}
.section .surround:before {
content: "";
position: absolute;
left: -8px;
width: 10%;
height: 20px;
top: -20px;
background-color: #fff;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
z-index: 5;
}
.section .surround:after {
content: "";
position: absolute;
right: -8px;
width: 90%;
height: 20px;
top: -20px;
background-color: #fff;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
z-index: 5;
}
.section.blue-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/nnHq6IP.png);
background-repeat: no-repeat;
background-position: top right;
z-index: 5;
}
.section.blue-wrapper .surround *:not(.btn-white) {
color: #fff;
}
.section.blue-wrapper .surround,
.section.blue-wrapper .surround:before,
.section.blue-wrapper .surround:after {
background-color: #00aeef;
z-index: 4;
}
.section.grey-wrapper .surround,
.section.grey-wrapper .surround:before,
.section.grey-wrapper .surround:after {
background-color: #e1e1e1;
}
.section .content {
text-align: center;
position: relative;
padding: 20px 0;
}
.section.grey-wrapper .section-title {
color: #777;
}
/*------------------------------------*\
MISC
\*------------------------------------*/
*.btn-white {
color: #fff;
margin: 1rem 0;
padding: 0.6rem 2.3rem;
background: none;
display: inline-block;
border: 1px solid #fff;
border-radius: 20px;
text-decoration: none;
transition: all 0.1s linear;
}
*.btn-white:hover {
text-decoration: none;
background: #fff;
color: #0e0048;
}
<!doctype html>
<html lang="en-GB" class="no-js">
<head>
<meta charset="UTF-8">
<title>
<?php wp_title(''); ?>
<?php if(wp_title('', false)) { echo ' :'; } ?>
<?php bloginfo('name'); ?>
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
</head>
<body class="home">
<div id="mm-page">
<!-- header -->
<header class="header" role="banner" style="height: 200px;">
<div class="header-items">
<!-- logo -->
<div class="logo">
<a href="#">
<h1>Logo</h1>
</a>
</div>
<!-- /logo -->
</div>
</header>
<!-- /header -->
<div class="section blue-wrapper">
<div class="surround">
<div class="container">
<div class="row">
<div class="col-12">
<article class="content">
<h2 class="section-title">Coloured Wrapper</h2>
<p>This is a sample text.</p>
<a class="btn-white" href="#">Button</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="section grey-wrapper">
<div class="surround">
<div class="container">
<div class="row">
<div class="col-12">
<section class="content">
<h2 class="section-title" style="margin-bottom: 0;">Grey</h2>
</section>
</div>
</div>
</div>
</div>
</div>
My problem is: anything beneath the ::before element are unclickable. Are there any other ways I could code this while keeping the design?
Solutions I've tried:
Give ::before a set width of 380px, but this only fixes my problem for bigger screens.
Add the background-image within the section class instead. But the top-right border overlapping the background-image instead - not my desired result.
Use the property pointer-events: none on the ::before element.
Thank you arieljuod. This question is now answered.
I've added pointer-events: none inside ::before element.
I would like to include the mouseover 'Shop Now' effect on my images, I used this code:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:
What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?
<!DOCTYPE html>
<html>
<style>
.container {
width:300px; /*edited here*/
height:300px;
/*this syntax is for html tags ONLY: style= "width:300px;height:300px;"*/
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
you used the wrong syntax for css. style= "width:300px;height:300px;" would be correct if it was in your html like so:
<div class = "container" style= "width:300px;height:300px;"></div>
but in css the style is already implied throught the tags so in css all you need to do is:
.container{
width:300px;
height:300px;
/*and so on*/
}
note: to avoid future problems learn about chrome's inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Few short notes:
U cannot use style= "width:300px;height:300px;" within css. Within your example, your first line should be:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:
<div class="container" style="width:300px;height:300px;">
You furthermore don't really have to call width and height both, since an image will scale automatically when it has one of these.
With all this being said, I believe this code solves your problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>