I have a div with a class called 'ball', each edge of the div has a border (border-top, border-left etc) I want to trigger different events with JavaScript when the user clicks on a border on each border.
ex: user clicks on border-top
console.log('top')
and so on
HMTL:
.ball {
border-radius: 50%;
width: 400px;
height: 400px;
margin: auto;
background-color: red;
border-top: 20px solid green;
border-left: 20px solid blue;
border-bottom: 20px solid orange;
border-right: 20px solid purple;
}
<div class="ball"></div>
I know I can trigger events when the user clicks on the div itself, but I would like to, somehow, select these borders with Javascript.
You can simulate this by adding extra elements.
Here is an exmaple (I used jQuery for simplicty but you can easily change to JS)
$('span').click(function(){
console.log($(this).data('value'));
})
.ball {
border-radius: 50%;
width: 200px;
height: 200px;
margin: auto;
background-color: blue;
position: relative;
font-size:0;
}
span:first-child {
position: absolute;
z-index: 3;
border-radius: 50%;
background: red;
top:20px;
left:20px;
bottom: 20px;
right: 20px;
}
span:nth-child(n+2) {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 50%;
background: green;
bottom: 0;
right: 0;
-webkit-clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
span:nth-child(3) {
transform:rotate(90deg);
background: purple;
}
span:nth-child(4) {
transform:rotate(180deg);
background: blue;
}
span:nth-child(5) {
transform:rotate(-90deg);
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ball">
<span data-value="center"></span>
<span data-value="bottom"></span>
<span data-value="left"></span>
<span data-value="top"></span>
<span data-value="right"></span>
</div>
Related
I'm programming a website where when you go down to "Partners & Sponsors" you get to a menu which you can open by clicking an Image of an Arrow (anchor element), when I click it I want the company logos to flare up a bit (like get a bit bigger for 1s and then go back to default) after pressing the button, also I need the animations to play one after another for like 4 Logos.
so basically I want some images to change their size after a button is pressed and after like 1s I want them to get back to their default size. Below are some code snippets, also I have absolutely no clue about java script so something with only CSS and html would be perfect, thanks in advance.
html:
<div class="pfeilbox"></div>
<a class="DingsFürZertifkateKnopf">
<script>
$("#1").click(function() {
$('EsetLogoUnten').toggleClass('EsetLogoUntenANIMATION');
});// doesnt work
</script>
<img id="1" src="images/pfeilfertch.png" style="position: relative; left:500px; top:-25px; width: 50px; z-index: 64; ">
</a>
<div class="DingsFürZertifkateInhalt">
<div class="dasdingbestimmtdiegrößevondemweißendinglol"></div>
<div class="EsetLogoFürUnten">
<div class="EsetLogoFürUntenText">
<p>text</p>
</div>
</div>
and here is my CSS:
.pfeilbox{
position: relative;
left: 470px;
top: 20px;
display: block;
background-color: rgb(255, 255, 255);
z-index: 42;
width: 150px;
height: 50px;
border: solid black;
border-width: 1px;
border-color: black;
}
.EsetLogoFürUnten{
position: relative;
width: 300px;
height: 123px;
top: -800px;
left: 0px;
z-index: 334;
margin-bottom: 5px;
background-image: url(images/Partnerlogo_Gold-small.png);
background-repeat: no-repeat;
border-radius: 12px;
animation-name: EsetLogoUntenAnimation;
animation-duration: 1s;
}
.EsetLogoUntenANIMATION{
position: relative;
width: 0px;
height: 123px;
top: -800px;
left: 10000px;
z-index: 334;
margin-bottom: 5px;
background-image: url(images/altaro_vm_backup.png);
background-repeat: no-repeat;
border-radius: 12px;
animation-name: EsetLogoUntenAnimation;
animation-duration: 1s;
}
.EsetLogoFürUntenText{
position: relative;
width: 300px;
height: 130px;
font-size: 1em;
top: 150px;
left: 0px;
z-index: 334;
display: block;
background-color: #ffffff;
border: solid black;
border-width: 1px;
border-color: black;
box-shadow: 5px 5px 2px rgba(47, 52, 57, 0.378);
}
Can anyone please help with this? How to achieve the attached button with CSS only(no image)?
This is my code so far:
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
<div class="triangle-up"></div>
Use pseudo element where you apply a radial-gradient:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background:green;
border-radius:50px;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:50%;
width:60px;
height:25px;
transform:translateX(-50%);
background:
radial-gradient(farthest-side at top left , transparent 98%,green 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,green 100%) right;
background-size:50.2% 100%;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box">more and more text here</div>
<div class="box">2 lines <br>of text</div>
Another idea in case you want any kind of coloration:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background-image:linear-gradient(60deg,yellow,purple,green,blue);
background-size:100% calc(100% + 25px);
background-position:bottom;
border-radius:50px;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
bottom:0;
left:0;
right:0;
height:calc(100% + 25px);
background-image:inherit;
-webkit-mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
-webkit-mask-size:30px 25px;
mask-size:30px 25px;
-webkit-mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box" style="
background-image:linear-gradient(160deg,white,red,black,orange);">more and more text here</div>
<div class="box" style="
background-image:linear-gradient(180deg,blue 20%,violet 20%,black);">2 lines <br>of text</div>
you can use the shadow on both rounded pseudos
.bubble {
position: relative;
background: #00aabb;
border-radius: 0.4em;
width: 200px;
height: 100px;
}
.bubble:after,
.bubble:before {
content: "";
position: absolute;
height: 3em;
width: 3em;
border-radius: 50%;
top: 100%;
margin: -1px;
}
:after {
left: 50%;
box-shadow: -0.8em -1.4em 0 -0.5em #00aabb
}
:before {
right: 50%;
box-shadow: 0.8em -1.4em 0 -0.5em #00aabb;
}
<div class='bubble'></div>
to understand how it works, give a background to the pseudo and another color to the shadows. You'll be able to reproduce for the sides or the top. It's a matter of the circle size and shadow's size and direction.
One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.
In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::after.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
overflow: hidden;
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: white;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
Here is a more visual demonstration of what the code is actually doing. The ::before and ::after elements are represented by the red circles. I've reduced the transparency of their fill to 50% so you can see which portion of the .point div they're cutting off.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: rgba(255,255,255,0.5);
border: 1px solid red;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
[enter image description here][1]
I am new to JS and learning DOM. I was trying to learn to on rotating using DOM follow the link on this tutor below.
https://morioh.com/p/8ae9a2ad64a7?fbclid=IwAR0nTt-eix7NIUXsnYcWezZpXGj_EOughWVZ-0Xd4XdeHha_yhZsn2wW9IQ
Somehow i couldn't figure out how to manipulate it by hiding the rest which remained on the grey background that are not suppose to be visible. Really appreciate for your help in advance.
https://samuelng87.github.io/ns-pet-switch/
[2]: https://samuelng87.github.io/ns-pet-switch/
You could try this:
Wrap the <div id="circle"> element with a <div id="clip"> element
Give this a style of
#clip {
-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%);
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}
See Canisue CSS clip-path property (for HTML)
for compatibility details
var circle = document.getElementById('circle')
var upBtn = document.getElementById('upBtn')
var downBtn = document.getElementById('downBtn')
var rotateValue = circle.style.transform;
var rotateSum;
upBtn.onclick = function() {
rotateSum = rotateValue + "rotate(-90deg)";
circle.style.transform = rotateSum;
rotateValue = rotateSum
}
downBtn.onclick = function() {
rotateSum = rotateValue + "rotate(90deg)";
circle.style.transform = rotateSum;
rotateValue = rotateSum
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.main {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(to right, #020007, #01060a);
}
nav {
width: 80%;
position: sticky;
margin: 20px auto;
z-index: 1;
display: flex;
align-items: center;
}
.logo {
flex-basis: 20%;
}
.logo img {
width: 200px;
border-radius: 10px;
position: relative;
left: -5rem;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
margin: 0px 20px;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
}
.information {
width: 1000px;
height: 1000px;
position: absolute;
top: 50%;
left: -10%;
transform: translateY(-50%);
}
#clip {
-webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%);
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}
#circle {
width: 1000px;
height: 1000px;
top: 0;
left: 0;
border-radius: 50%;
transform: rotate(0deg);
transition: 0.4s;
}
.feature img {
width: 100px;
position: relative;
object-fit: contain;
border-radius: 10%;
}
.feature {
display: flex;
color: #fff;
position: absolute;
}
.feature div {
margin-left: 30px;
}
.feature div p {
margin-top: 8px;
}
.one {
top: 450px;
right: 50px;
}
.two {
top: 150px;
left: 350px;
transform: rotate(-90deg);
}
.three {
bottom: 450px;
left: 50px;
transform: rotate(-180deg);
}
.four {
bottom: 150px;
right: 350px;
transform: rotate(-270deg);
}
.char {
border-radius: 10px;
position: absolute;
width: 200px;
top: 50%;
left: 35%;
transform: translateY(-50%);
z-index: 1;
}
.controls {
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.controls h3 {
margin: 15px 0;
color: #fff;
}
#upBtn {
border: 3px solid grey;
width: 20px;
cursor: pointer;
border-radius: 10px;
transform: rotate(180deg);
}
#downBtn {
border: 3px solid grey;
width: 20px;
cursor: pointer;
border-radius: 10px;
}
#downBtn:hover {
width: 21px
}
#upBtn:hover {
width: 21px
}
.overlay {
width: 0;
height: 0;
border-top: 500px solid #ccc;
border-right: 500px solid black;
border-bottom: 500px solid #ccc;
border-left: 500px solid #ccc;
position: absolute;
left: 0;
top: 0;
}
.cover1 {
position: absolute;
width: 100px;
background-color: red;
height: 100px;
}
.cover2 {
position: absolute;
}
.cover2 {
position: ;
}
<base href="https://samuelng87.github.io/ns-pet-switch" />
<div class="main">
<nav>
<div class="logo">
<img src="https://samuelng87.github.io/ns-pet-switch/ns-logo.jpg" alt="logo">
</div>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Game</li>
<li>Status</li>
</ul>
</div>
</nav>
<div class="cover1"></div>
<div class="cover2"></div>
<div class="cover3"></div>
<div class="information">
<div class="overlay"></div>
<img src="https://samuelng87.github.io/ns-pet-switch/mainchar.png" alt="char" class="char">
<div id="clip">
<div id="circle">
<div class="feature one"><img src="https://samuelng87.github.io/ns-pet-switch/nibi.png" alt="cat">
<div>
<h1>Nibi</h1>
<p>Defence & Attack</p>
</div>
</div>
<div class="feature two"><img src="https://samuelng87.github.io/ns-pet-switch/yobi.png" alt="bird">
<div>
<h1>Yobi</h1>
<p>Full Defence</p>
</div>
</div>
<div class="feature three"><img src="https://samuelng87.github.io/ns-pet-switch/emna.png" alt="monkey">
<div>
<h1>Enna</h1>
<p>Full Attack</p>
</div>
</div>
<div class="feature four"><img src="https://samuelng87.github.io/ns-pet-switch/gobi.png" alt="dog">
<div>
<h1>Gobi</h1>
<p>Full Attack</p>
</div>
</div>
</div>
</div>
</div>
<div class="controls">
<img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="upBtn">
<h3>Pets</h3>
<img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="downBtn">
</div>
</div>
An alternative would be to use two linear gradients as mask
#clip {
width: 1000px;
height: 1000px;
top: 0;
left: 0;
-webkit-mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
-webkit-mask-size: 50% 50%, 50% 50%;
mask-size: 50% 50%, 50% 50%;
-webkit-mask-position: 100% 100%, 100% 0%;
mask-position: 100% 100%, 100% 0%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
var circle = document.getElementById('circle')
var upBtn = document.getElementById('upBtn')
var downBtn = document.getElementById('downBtn')
var rotateValue = circle.style.transform;
var rotateSum;
upBtn.onclick = function() {
rotateSum = rotateValue + "rotate(-90deg)";
circle.style.transform = rotateSum;
rotateValue = rotateSum
}
downBtn.onclick = function() {
rotateSum = rotateValue + "rotate(90deg)";
circle.style.transform = rotateSum;
rotateValue = rotateSum
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.main {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(to right, #020007, #01060a);
}
nav {
width: 80%;
position: sticky;
margin: 20px auto;
z-index: 1;
display: flex;
align-items: center;
}
.logo {
flex-basis: 20%;
}
.logo img {
width: 200px;
border-radius: 10px;
position: relative;
left: -5rem;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
margin: 0px 20px;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
}
.information {
width: 1000px;
height: 1000px;
position: absolute;
top: 50%;
left: -10%;
transform: translateY(-50%);
}
#clip {
width: 1000px;
height: 1000px;
top: 0;
left: 0;
-webkit-mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
mask-image: linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
-webkit-mask-size: 50% 50%, 50% 50%;
mask-size: 50% 50%, 50% 50%;
-webkit-mask-position: 100% 100%, 100% 0%;
mask-position: 100% 100%, 100% 0%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
#circle {
width: 1000px;
height: 1000px;
top: 0;
left: 0;
border-radius: 50%;
transform: rotate(0deg);
transition: 0.4s;
}
.feature img {
width: 100px;
position: relative;
object-fit: contain;
border-radius: 10%;
}
.feature {
display: flex;
color: #fff;
position: absolute;
}
.feature div {
margin-left: 30px;
}
.feature div p {
margin-top: 8px;
}
.one {
top: 450px;
right: 50px;
}
.two {
top: 150px;
left: 350px;
transform: rotate(-90deg);
}
.three {
bottom: 450px;
left: 50px;
transform: rotate(-180deg);
}
.four {
bottom: 150px;
right: 350px;
transform: rotate(-270deg);
}
.char {
border-radius: 10px;
position: absolute;
width: 200px;
top: 50%;
left: 35%;
transform: translateY(-50%);
z-index: 1;
}
.controls {
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.controls h3 {
margin: 15px 0;
color: #fff;
}
#upBtn {
border: 3px solid grey;
width: 20px;
cursor: pointer;
border-radius: 10px;
transform: rotate(180deg);
}
#downBtn {
border: 3px solid grey;
width: 20px;
cursor: pointer;
border-radius: 10px;
}
#downBtn:hover {
width: 21px
}
#upBtn:hover {
width: 21px
}
.overlay {
width: 0;
height: 0;
border-top: 500px solid #ccc;
border-right: 500px solid black;
border-bottom: 500px solid #ccc;
border-left: 500px solid #ccc;
position: absolute;
left: 0;
top: 0;
}
.cover1 {
position: absolute;
width: 100px;
background-color: red;
height: 100px;
}
.cover2 {
position: absolute;
}
.cover2 {
position: ;
}
<base href="https://samuelng87.github.io/ns-pet-switch" />
<div class="main">
<nav>
<div class="logo">
<img src="https://samuelng87.github.io/ns-pet-switch/ns-logo.jpg" alt="logo">
</div>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Game</li>
<li>Status</li>
</ul>
</div>
</nav>
<div class="cover1"></div>
<div class="cover2"></div>
<div class="cover3"></div>
<div class="information">
<div class="overlay"></div>
<img src="https://samuelng87.github.io/ns-pet-switch/mainchar.png" alt="char" class="char">
<div id="clip">
<div id="circle">
<div class="feature one"><img src="https://samuelng87.github.io/ns-pet-switch/nibi.png" alt="cat">
<div>
<h1>Nibi</h1>
<p>Defence & Attack</p>
</div>
</div>
<div class="feature two"><img src="https://samuelng87.github.io/ns-pet-switch/yobi.png" alt="bird">
<div>
<h1>Yobi</h1>
<p>Full Defence</p>
</div>
</div>
<div class="feature three"><img src="https://samuelng87.github.io/ns-pet-switch/emna.png" alt="monkey">
<div>
<h1>Enna</h1>
<p>Full Attack</p>
</div>
</div>
<div class="feature four"><img src="https://samuelng87.github.io/ns-pet-switch/gobi.png" alt="dog">
<div>
<h1>Gobi</h1>
<p>Full Attack</p>
</div>
</div>
</div>
</div>
</div>
<div class="controls">
<img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="upBtn">
<h3>Pets</h3>
<img src="https://samuelng87.github.io/ns-pet-switch/kunai.png" alt="arrow" id="downBtn">
</div>
</div>
I currently have a box shadow stemming from the border of my <img> and I'm looking for a way to have the effect inversed, where the shadow starts from the center and fills out the rest of the background.
Pen
CODE:
var medalImg = document.getElementById("benefitsImgMed");
document.getElementById("benefitsImgMed").onclick = function() {
imgClickFunction1()
};
function imgClickFunction1() {
medalImg.style.boxShadow = "0px 0px 0px 100px white inset";
setTimeout(doSomething, 1.6 /*Seconds*/ * 1000);
function doSomething() {
/*medalImg.style.borderStyle = "solid";*/
}
}
body {
background-color: black;
}
#benefitsImgMed,
#benefitsImgLig,
#benefitsImgArr,
#benefitsImgNig {
transition: 2s;
cursor: pointer;
z-index: 1;
position: absolute;
padding: 10px;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
}
#benefitsImgMed:hover {
box-shadow: inset 0 0 0 50px white;
}
#benefitsImgMed {
margin-left: 8%;
margin-top: 6%;
width: 13%;
height: 13%;
}
<div class="benefitImgs">
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9
140b7f3b7d84274/1510600813361/quality.png" id="benefitsImgMed" />
</div>
I looked over you code an changed a couple things. It seems like you may have some repetitive code by looking at them by id's. So instead I implemented a custom attribute to help us to keep track of which one was clicked. Additionally, I added an element on the inside that has very small width and height that draws a box-shadow outward. Go ahead and give it a whirl:
function doSomething() {
console.log('do something...')
}
$(".benefitImgs").click(function () {
var which = $(this).attr('data-which');
if (which === "med") {
$(this).find(".benefitImgsInner").css("box-shadow", "0px 0px 0px 55px white")
setTimeout(doSomething.bind(this),1.6*1000);
}
});
body{background-color:black;}
.benefitImgs {
width: 13%;
position: relative;
margin-left: 8%;
margin-top: 6%;
transition: 2s;
cursor:pointer;
z-index:1;
padding: 10px;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
}
.benefitImgsInner {
z-index:-1;
width:2px;
height:2px;
border-radius:50%;
position:absolute;
top: 50%;
left: 50%;
transition:all 2s ease-in-out;
transform: translate(-50%, -50%);
}
.benefitImgs:hover .benefitImgsInner {
transition:all 2s ease-in-out;
box-shadow: 0 0 0 50px white;
}
.benefitsImgsImg {
max-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="benefitImgs" data-which="med">
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png" class="benefitsImgsImg"/>
<div class="benefitImgsInner"></div>
</div>
Try this solution:
Note: I've dumbed it down substantially.
body{background-color:black;}
#benefitImgMed {
transition: 2s;
width: 200px;
height: 200px;
cursor:pointer;
z-index:1;
position: absolute;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: dashed;
overflow: hidden;
}
#benefitImgMed:after{
content: "";
position: absolute;
height: 0%;
width: 0%;
background: white;
opacity: 0;
top: 50%;
left: 50%;
border-radius: 100%;
transition: all 1s;
}
#benefitImgMed:hover::after{
background: white;
height: 100%;
width: 100%;
opacity: 1;
top: 0px;
left: 0px;
}
<div id="benefitImgMed">
</div>
I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element...
i have posted images as well for better assistance.
'http://imgur.com/a/YxipO' = (actual image of my code)
'http://imgur.com/a/7ltDa' = (what i want to do using css or js)
.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}
.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}
You can use a box shadow, like this
.content {
height: 200px;
width: 300px;
position: relative;
background: url(http://lorempizza.com/500/350/);
background-size: cover;
}
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border: 7px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
/* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent
opacity inside circle
*/
}
<div class="content">
<div class="logo-circle"></div>
</div>
You may consider following example approach:
.content {
height: 200px;
width: 200px;
position: relative;
}
.banner-inner {
background-color: rgba(0, 0, 0, 0.2);
padding: 3%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.logo-circle {
width: 1em;
border: 7px solid #fff;
border-radius: 50%;
padding: 1em;
z-index: 2;
height: 1em;
position: absolute;
top: 50%;
margin-top: -1.5em;
left: 50%;
margin-left: -1.5em;
}
<div class="content">
<div class="banner-inner"></div>
<div class="logo-circle"></div>
</div>
For background in circle use RGBA
.logo-circle {
background: rgba(0, 0, 0, 0.2);
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;
}
You could use the same picture (as seen in the background) as background in .logo-circle. And set the position of the image like this: background-position: center;
or:
Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden;. For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);