I am pretty new to CSS, JavaScript and HTML so this might be a noob questions. Basically, I want the text highlight and size to change simultaneously. I have this so far:
-webkit-transition: font-size 0.5s;
-moz-transition: font-size 0.5s;
-o-transition: font-size 0.5s;
transition: font-size 0.5s;
}
.hl:before {
content: "";
position: absolute;
bottom: 0;
left: 0px;
height: 65%;
width: 0;
-webkit-transition: width 0.8s, background 2s, font-size 2s;
transition: width 0.8s, background 2s, font-size 2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transform-origin: left;
transform-origin: left bottom;
overflow: hidden;
z-index: -1;
box-shadow: 2px 0 0 2px rgba(230,249,0,0.15) inset;
border-radius: 3px;
-webkit-transform: skewX(-2deg) rotate(-1.5deg) translateY(0);
transform: skewX(-2deg) rotate(-1.5deg) translateY(0);
background: rgba(0, 204, 82,0.85);
box-shadow: 2px 0 0 2px rgba(0,216,255,0.1) inset;
}
.animate .hl:before {
font-size: 40px;
color: #fc0;
background: rgba(255,85,0,0.65);
height: 100%;
width: 100%;
}
This should be <span class="h1"> highlighted</span>
The js file looks like this:
function highlight_stuff() {
$('html').toggleClass('animate')
}
The text gets highlighted, however it does not change size. I cannot figure out why. Any help is greatly welcome.
You're setting the new font-size on the before pseudo element not the element with the .hl class on it. Try this:
.animate .hl:before {
color: #fc0;
background: rgba(255,85,0,0.65);
height: 100%;
width: 100%;
}
.animate .hl {
font-size: 40px;
}
If you're toggling a class, appending and then removing it from the h1, then the code will look like class = "h1 animate" (not the other way around) or class = h1. If you correct the animate class then the text will enlarge correctly.
in this fiddle, I have manually added the animate class to display enlarged text (I omitted the javascript as I didn't know where or how you were calling the function, but you get the picture)
hope this helps
Related
So I want to create a button that would go in the bottom of my screen and create a semicircle around it with more buttons inside when clicked. I've tried adjusting the CSS but Im not able to come up with a solution. Do you guys know a way to do it? I came across this codepen ("https://codepen.io/jet/pen/LwiGu"), which is almost exactly what I want, instead of creating a whole circle around it, it would create a semicircle around the top. I've attached an image for you guys to understand it better.
var items = document.querySelectorAll('.menuItem');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.center').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
#import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
/* Image source: http://wallbase.cc/wallpaper/718405 */
/* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
background: cornflowerblue url(" data:image/png;base64,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") no-repeat fixed;
background-size: cover;
}
a {
font-size: 14px;
text-decoration: none;
outline: 0;
}
.circle,
.ring {
height: 256px;
position: relative;
width: 256px;
}
.circle {
margin: 0 auto;
}
.ring {
background-color: rgba(0,0,0,0.5);
border-radius: 50%;
opacity: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.1) rotate(-270deg);
-moz-transform: scale(0.1) rotate(-270deg);
-transform: scale(0.1) rotate(-270deg);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .ring {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.center {
background-color: rgba(255,255,255,0.3);
border-radius: 50%;
border: 2px solid #ffffff;
bottom: 0;
color: white;
height: 80px;
left: 0;
line-height: 80px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 80px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .center {
border-color: #aaaaaa;
}
.menuItem {
border-radius: 50%;
color: #eeeeee;
display: block;
height: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
width: 40px;
}
<div class="circle">
<div class="ring">
</div>
</div>
[menu mockup][1]
[1]: https://i.stack.imgur.com/GR419.png
If i understand your desire correctly, then all you'd have to change is this:
The .ring currently has height&width 256px, change that if you want it bigger/smaller.
Now re-position the .ring so that it is aligned with the bottom of its container. You do that by setting a negative bottom of exactly half the .rings height (so something like bottom: -128px;).
Now you have to decide how many icons you need on there (there used to be 8 buttons in your source, but now that we clipped it, there is only 4 visible).
Now, adjust the 2 javascript lines (the ones with ...Math.PI... in it) to account for
(A) the amount of icons you want and
(B) the fact that you only want to populate the upper half of the .ring
The 2 Math.PI lines (which set the position of each individual button, aren't complicated but how you have to change them depends entirely on how big you're making the thing, and how many button you want to place on it - so i cannot really provide an example without knowing that.
I have a div element in the shape of an egg and rotated 140 degrees.
HTML:
<div id="egg-container">
<div id="egg-blue" class="egg egg-large"></div>
</div>
CSS:
#egg-container {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
border: 1px solid red;
margin: 0 auto;
}
.egg {
position: absolute;
background-image: radial-gradient(#00F9AF, #0054FD 70%);
box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
height: 10px;
width: 10px;
top: 75px;
}
#egg-blue {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(140deg);
opacity: 0.8;
}
.egg-lg {
top: 25px;
right: -25px;
height: 160px;
width: 140px;
}
.egg-md {
/* How to scale down correctly? */
}
.egg-sm {
/* How to scale down correctly? */
}
.egg-xs {
/* How to scale down correctly? */
}
My goal is to leverage JavaScript to simply switch classes between large, medium, small and extra small. I know how to employ toggling classes.
But I'm having trouble connecting the dots on styling this correctly when classes change between -lg, -md, -sm, -xs. It looks too snappy, choppy, etc.
Another way to imagine this outside of code is a flower blooming. When I toggle the class with JavaScript, that's essentially what I am trying to accomplish. Do note, the red circle styling is there to act as a visual center.
I want that egg that you see illustrated to maintain its aspect ratio AND its rotation. Simply scale the element bigger or smaller, depending on the applied class selector.
I figure the root of my problem at the moment is that I am hard-coding pixel widths and heights.
If you have any ideas, please chime in.
Here is the fiddle: https://jsfiddle.net/excqrun0/12/
Thank you.
you can use transform : scale(0.5); to scale down the element : https://www.w3schools.com/css/css3_2dtransforms.asp
and you can add it to your previous transform like transform: rotate(140deg) scale(1); , move the width and height and other stuff to the id egg-blue and fill the classes with the new transform , and use javascript to switch between the classes :
var egg = document.getElementById('egg-blue');
document.getElementById('big').addEventListener('click', function(){
egg.classList.add("egg-large");
egg.classList.remove("egg-medium");
egg.classList.remove("egg-small");
});
document.getElementById('medium').addEventListener('click', function(){
egg.classList.add("egg-medium");
egg.classList.remove("egg-large");
egg.classList.remove("egg-small");
});
document.getElementById('small').addEventListener('click', function(){
egg.classList.add("egg-small");
egg.classList.remove("egg-large");
egg.classList.remove("egg-medium");
});
#egg-container {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
border: 1px solid red;
margin: 0 auto;
}
.egg {
position: absolute;
background-image: radial-gradient(#00F9AF, #0054FD 70%);
box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
height: 10px;
width: 10px;
top: 75px;
}
#egg-blue {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
opacity: 0.8;
top: 25px;
right: -25px;
height: 160px;
width: 140px;
}
.egg-large {
transform: rotate(140deg) scale(1);
}
.egg-medium {
transform: rotate(140deg) scale(0.7);
}
.egg-small {
transform: rotate(140deg) scale(0.4);
}
#buttons{
position: absolute;
bottom: 0;
}
<div id="egg-container">
<div id="egg-blue" class="egg egg-large"></div>
</div>
<div id="buttons">
<button id="big"> BIG </button>
<button id="medium"> MEDium </button>
<button id="small"> small </button>
</div>
So I want this div to fade another div that has a black background at 0.5 opacity over it. But when i hover it ignores the image already in the div and fills a black then fades the other div. so it goes Image --> Solid black div --> then fades my second div.
https://jsfiddle.net/70e890e6/
HTML:
<div class="box1">
<div class="img_hover_effect"></div>
<img src="images/portfolio/charity.png" class="box1_img">
<img src="images/portfolio/charity/2.png" class="box1_img2">
</div>
CSS:
.img.img_hover_effect {
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
JQuery:
$(document).ready(function(){
$('.box1').on('mouseenter', function() {
$('.img_hover_effect').fadeIn(1000);
});
});
You can use jQuery hover like this :
$('.box1').hover(function() {
$('.hover').fadeIn(1000);
}, function(){
$('.hover').fadeOut(1000);
});
and some css changes :
.box1 {
position:relative;
height: 400px;
width: 350px;
margin: 0 auto;
margin-top: 100px;
float: left;
overflow: hidden;
}
.tree {
height: 100%;
width: auto;
display: block;
position: relative;
}
.hover {
position:absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: none;
z-index: 10;
}
JSFIDDLE : https://jsfiddle.net/70e890e6/4/
You could use a CSS pseudo-class for the desired hover effect. I'd recommend applying the class directly to the images you wish to have the hover effect rather than overlaying with another div.
.hover-effect:hover{
background-color: #000000; //or whatever colour fade you are looking for
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
I have transform css applied to a line of text (font-size), but it animates from the left side, I want it to animate from the center. I am using Bootstrap framework so the div is vert/horiz centred.
HTML
<article class="col-md-12">
<div class="lg-indx-img">
<div class="cat-icn">
<?php the_title(); ?>
</div>
</div>
</article>
CSS
article {
position: relative;
margin-bottom: 10px;
width: 100%;
}
.linkage {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.lg-indx-img { padding: 20% 0; }
.cat-icn {
position: absolute;
z-index: 9;
left: 50%;
top: 50%;
opacity: 0;
font-size: 15px;
color: #fff;
text-align: center;
transform-origin: 50% 50%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.linkage:hover + .cat-icn {
opacity: 1;
font-size: 25px;
}
when .linkage is hovered the title in .cat-icn increases in size. I don't know the length of the text line since it's generated by Wordpress post.
EDIT - The top picture is what it does now, the bottom picture is what I want it to do
Instead of setting a new font size, you can try using the transform property, which should do the right thing since you have transform-origin already set to the center.
.linkage:hover + .cat-icn {
transform: scale(1.5);
}
Try this out.
http://codepen.io/Chevex/pen/bdRvvJ
.linkage:hover + .cat-icn {
opacity: 1;
transform: scale(3);
}
Instead of animating the font size, animate the transform property instead. Then in your hover rule use the transform property to adjust the scale of the element.
My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}
I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/
+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>