Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to make first circle can expanding as big as the second circle in the background with button, do anyone know how ?
Well one way to do it would be to use java script to add and remove classes which hold the properties of your circle.
You could create a css class that holds one set of properties that is then called by javascript when a button is clicked.
.circle_b {
height: 200px;
width: 200px;
border-radius: 50%;
background: #ddd;
position: relative;
}
.circle_s {
height: 80px;
width: 80px;
border-radius: 50%;
background: #ddd;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;
background: coral;
cursor: pointer;
transition: all 0.2s ease;
}
.sizePlus{
height: 200px;
width: 200px;
transition: all 0.2s ease;
}
button{
display: block;
position: absolute;
width: 200px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(document).click(function (e) {
$el = $(e.target);
if ($el.hasClass('clickme')) {
$(".circle_s").toggleClass('sizePlus');
} else {
$(".circle_s").removeClass('sizePlus');
}
});
</script>
<div class="circle_b">
<button class="circle_s clickme">
CLICK ME
</button>
</div>
</body>
DEMO
Animation is on hover of button
HTML
<div class="circle_b">
<button class="circle_s">
HOVER ME!
</button>
</div>
CSS
.circle_b {
height: 200px;
width: 200px;
border-radius: 50%;
background: #ddd;
position: relative;
}
.circle_s {
height: 80px;
width: 80px;
border-radius: 50%;
background: #ddd;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;
background: coral;
cursor: pointer;
transition: all 0.2s ease;
}
.circle_s:hover {
height: 200px;
width: 200px;
transition: all 0.2s ease;
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed yesterday.
Improve this question
I am was making a slider, but I can’t get it to have an animation when a person clicks a button to move to the other image. How can I fix it?
The HTML code:
<h2>client showcase</h2>
<br />
<img src="images here.jpeg" />
<br />
<img src="left.jpg" alt="previous client" />
<img src="right.jpg" alt="next client" />
The CSS code:
.slider2 .change{ border-radius: 5px; width: 300px; height: 300px; transition: opacity 1s; }
I have tried many ways, but I can’t get a proper animation. I have tried adding classes, but it does not work properly.
I solved this by adding a class to the image when a button is clicked so the image will move, change, change colours, fade, rotate and many more
CSS
.slider2 .change{
border-radius: 5px;
width: 500px;
height: 300px;
}
.small{
font-size: xx-small;
color: #a8a0a0;
}
.slider2 .change2{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2 .change3{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2 .change4{
border-radius: 5px;
width: 500px;
height: 300px;
}
.slider2{
position: relative;
top: 0;
left: 0;
position: relative;
width: 50%;
}
.change{
opacity: 1;
position: relative;
top: 0;
left: 0;
border: 1px solid #000000;
transition: 0.3s;
}
.change2{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
transition: opacity 0.3s;
}
.change3{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
}
.change4{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
}
.ninja{
opacity: 0;
}
.hidden{
opacity: 0;
}
.hide{
animation: move 400ms ;
}
.show{
opacity: 1;
}
.slided{
animation: slide 400ms;
}
#keyframes move{
from{opacity: 100%;}
to{opacity: 0%;}
}
#keyframes slide{
from{
transform: translateX(0px);
}
to{
transform: translateX(-500px);
}
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I wonder that if someone could provide or suggest me how to make a css style better approach than mine?
This is what expected shape :
What is done so far :
.labelModel {
display: block;
position: absolute;
z-index: 100;
border: 2px solid #ccc;
background-color: #404040;
cursor: pointer;
border-radius: 10px;
padding: 10px;
width: 12rem;
height: 12rem;
color: white;
margin-left: 100px;
}
.line-infocard {
position: relative;
top: 200px;
width: 150px;
height: 5px;
z-index: 99;
border: 2px solid #ccc;
background-color: #404040;
transform: rotate(-45deg);
}
<div>
<div class="line-infocard"></div>
<div class="labelModel">info :</div>
</div>
.labelModel {
display: block;
position: absolute;
z-index: 100;
border: 2px solid #ccc;
cursor: pointer;
width: 12rem;
height: 12rem;
margin-left: 100px;
}
.labelBox{
background-color: #404040;
width:89%;
height:89%;
padding: 10px;
transform: rotate(1deg);
color:orange;
}
.line-infocard {
position: relative;
top: 200px;
right:50px;
width: 150px;
height: 2px;
z-index: 99;
background-color: #404040;
transform: rotate(-60deg);
}
.line-infocard::after{
content:'';
width:2px;
height:40px;
background-color:black;
top: 88%;
right: -11px;
position: absolute;
transform: rotate(
-28deg);
}
<div>
<div class="line-infocard"></div>
<div class="labelModel">
<div class="labelBox">
info :
</div>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I would like to create a transition effect on hover that is similar to the large "start voting" button on this website but, while I am familiar with css transition effects, I dont know how to create that one in particular. Thank you for taking the time to read this.
You can use a background-size transition:
a {
position: relative;
display: inline-block;
padding: 12px 80px;
border: 2px solid #BDAA67;
color: white;
font-size: 30px;
text-decoration: none;
background-color: black;
background-image: linear-gradient(#BDAA67, #BDAA67);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: background-size .3s, color .3s;
}
a:hover {
background-size: 100% 100%;
color: #000;
}
<a href="#" class="button">
CLICK ME!
</a>
{content: "";
background-color: #bdaa67;
height: 0%;
width: 50%;
position: absolute;
left: 25%;
transition: all .15s ease-in-out;
top: 48%;
z-index: -1;}
Try this
Add the following lines of code to your HTML,
<button class="custom-btn">Start now</button>
Add the following lines of code to your custom.css. This will give the exact style on hover for the button. You can minimise the code if you are willing to use bootstrap. Here we have custom styled the button from scratch.
.custom-btn {
font-size: 25px;
padding: 32px 105px;
text-shadow: none;
border: 2px solid #000;
background: #000;
color: #fff;
font-weight: bold;
text-transform: uppercase;
position: relative;
z-index: 1;
transition: all .33s ease-in-out;
}
.custom-btn:hover {
border: 2px solid #bdaa67;
color: #000;
}
.custom-btn::before {
content: "";
background-color: #bdaa67;
height: 0%;
width: 50%;
position: absolute;
left: 25%;
transition: all .15s ease-in-out;
top: 48%;
z-index: -1;
}
.custom-btn:hover::before {
height: 100%;
width: 100%;
left: 0;
top: 0;
}
<body>
<button> START VOTING </button>
</body>
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: red;
}
button {
position: absolute;
padding: 40px 120px;
font-weight: bold;
border: 0;
color: #fff;
font-size: 2em;
text-transform: uppercase;
background: #000;
z-index: 1;
}
button::before {
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #bdaa67;
transform: scale(0);
transition: 0.3s;
z-index: -1;
}
button:hover:before {
transform: scale(1);
}
button:hover {
border: 3px solid #bdaa67;
color: #000;
}
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 5 years ago.
I have this project:
https://jsfiddle.net/3xw9aqew/
When a user hovers over the grey box, a red overlay appears with a green border/outline. However this border is applied to the overlay which has an opacity value applied to it on hover.
.image-container:hover .overlay {
opacity: 0.3;
}
I want the overlay to be translucent, allowing the image below to be seen, but I want the border around this to be solid so its a standard "green" colour. This is the CSS for the overlay:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: red;
border:10px solid green;
box-sizing:border-box;
}
How can i achieve this?
For the intended behaviour, apply the required transparency directly to the background-color property value instead of the containing element as a whole. This can be done by adjusting the rgba value as demonstrated in the embedded code snippet below.
opacity applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, the
element and its children all have the same opacity relative to the
element's background, even if they have different opacities relative
to one another.
opacity - CSS | MDN
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
Updated JSFiddle
Code Snippet Demonstration:
var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");
//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
lorem.classList.toggle("hdr-color-white");
ipsum.classList.toggle("hdr-color-white");
lorem.classList.toggle('hdr-left-middle');
ipsum.classList.toggle('hdr-right-middle');
});
body {
max-width: 100%;
overflow-x: hidden;
background: yellow;
font-family: sans-serif;
}
.container {
width: 85%;
max-width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
width: 100%;
max-width: 920px;
}
p {
font-size: 18px;
color: blue;
font-weight: bold
}
p.left {
position: absolute;
top: 0;
bottom: 0px;
right: -32%;
transform: rotate(-90deg);
}
p.right {
position: absolute;
top: 0;
bottom: 0;
left: -32%;
transform: rotate(90deg);
}
h2 {
font-size: 5em;
position: absolute;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
margin: 0;
z-index: 5;
color: blue;
transition: all 0.5s ease-in-out;
}
.hdr-color-white {
color: white;
}
.hdr-left {
left: -12%;
top: -35%;
}
.hdr-left-middle {
left: 7%;
top: 40%;
}
.hdr-right {
right: -10%;
top: 110%;
}
.hdr-right-middle {
right: 7%;
top: 40%;
}
/*Hovers*/
.container:hover {
cursor: pointer
}
.container:hover>p {
color: red;
}
.container .image-container:hover {}
/*Hovers Ends*/
/*Overlay*/
.image-container {
position: relative;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.image {
display: block;
width: 100%;
height: auto;
outline: 5px solid blue;
}
.container .image-container:hover>.image {
outline: none;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
/*Overlay Ends*/
<div class="container">
<!--Rotated Text-->
<p class="right">Harolds</p>
<p class="left">Harolds</p>
<!--//Rotated Text-->
<h2 class="hdr-left hdr-color" id="lorem">Lorem</h2>
<div class="image-container" id="imgContainer">
<img src="http://via.placeholder.com/980x550" alt="gucci" class="image">
<!--colour overlay-->
<div class="overlay"></div>
<!--//colour overlay-->
</div>
<h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I made a slider with pure css and I want to set the background opacity of each background-image (so, that I can give it a nice fade animation). I know that I could use css generated content to add image using opacity: 1; property but I have a lot of css code so is there any easy way to get around this??
without any generated content or psuedo-elements??
/************ SLIDER ************/
/*this contains the slides which are inside a wrap*/
#slide-Panel{
width: 100%;
height: 40%;
overflow: hidden;
}
/*this contins the slides*/
.wrap{
position: relative;
width: 100%;
height: 100%;
background: #000;
text-align: center;
overflow: hidden;
}
.slide{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
background: #000;
background-repeat: no-repeat;
background-position:50% 50%;
background-size: cover;
padding: 2em 2em;
color: white;
font-size: 1em;
}
.slide a {
background: #0FCABF;
padding: .6rem 1.6rem;
color: white;
font-weight: 700;
margin: 1rem;
}
.wrap input[type="radio"]{
position: absolute;
z-index: 200;
bottom: 10%;
left: auto;
right: auto;
}
.wrap input[type="radio"]:nth-of-type(1){
margin-left: -1.2rem;
}
#slider-2-trigger{
margin-left: .4rem;
}
.slide-two{
background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/35VYJ0NK0V.jpg');/*change the opacity of these images*/
}
.slide-one{
background-image: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?crop=entropy&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1175');/*change the opacity of these images*/
}
[id^="slider"]:checked + section {
z-index: 100;
left: 0;
}
.slide :not(img){
display: none;
}
.slide img{
opacity: .6;
width: 220px;
height: 148px;
margin: 2em auto;
}
There is no direct way to change the opacity of a background image.
But here's a workaround, please try this.
Here's the code you should use:
div::after {
content: "";
// Add your background image here
background: url("https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg");
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
And the JSFiddle to it.