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.
Related
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
I have a left menu that slides in when the user clicks on the hamburger. Behind it is an overlay with the following SCSS:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
}
.left-menu {
background: $glb-nav-dark-blue;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
a:hover {
color: $glb-nav-white;
}
}
When people click on the hamburger menu, the overlay shows up abruptly. I need it to fade in. How can I do that using CSS?
Here's the HTML:
<div class="overlay"></div>
<div class="left-menu"></div>
When the user opens the page the left-menu has a left position of -284px. Then when people click on the hamburger icon, I add a class to the div that sets its left position to 0.
Instead of adding a class, you can set the opacity using jQuery's .CSS
For example:
$(".overlay").css({opacity:50});
To reset it, use
$(".overlay").removeAttr("style");
Use CSS transitions as you did for the menu:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Use css transitions as you did with the menu, ie:
.overlay {
// other css
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
-o-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
Or, if using SASS: #include transition(opacity 500ms ease);
Note, you can set the timing and style to be what you like, more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
just add transition to the overlayed div
div {
/* -transition: 2 seconds- */
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: 2s;
}
div:hover {
height: 200px;
background: red;
}
<div>transition on hover</div>
So I'm trying to do a pop-out menu, and I have a bit of an issue.
I've applied:
.menu-side, .menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu is set to the body, and menu-side to the pop-out menu. The left of both the menu and body is changed when the pop-out menu is loaded. But for some reason it isn't easing correctly?
The problem is that the initial value of left property is auto.
Therefore, the browser doesn't know how to do the transition from auto to 180px.
To fix it, you must set it to 0 initially:
.menu {
left: 0px;
transition: left 0.2s ease;
}
.menu-open {
left: 180px;
}
.menu {
left: 0px;
transition: left 0.2s ease;
background: red;
position: relative;
height: 200px;
}
:checked ~ .menu { /* .menu-open */
left: 180px;
}
<input id="toggler" type="checkbox" />
<label for="toggler">Toggle</label>
<div class="menu"></div>
Personally I would never animate the body element itself. You should always use a wrapper, the body has some special properties and doesn't always act you would expect a div to act. However, If you manually set left: 0 on the body the transition will work.
body {
left: 0;
}
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>
I dont have any idea how to make it work
Css:
.name
{
width: 270px;
height: 77px;
position: absolute;
top: 0px;
left: 600px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
.name:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
font-size: 24px;
}
.photo
{
width: 270px;
height: 310px;
position: absolute;
top: 77px;
left: 600px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
.photo:hover,
{
top: 100px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
font-size: 24px;
}
I want when i hold the mouse over the .name which is an image to activate the .photo hover effect and vice versa, any idea?
/* What you want the thing being hovered over to look like */
.name:hover {
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
font-size: 24px;
}
/* What you want the thing being hovered over to look like */
.name:hover ~ * {
/* Some styles */
}
In order for this to work, the items that you want to style need to be siblings of the .name element being hovered over. The ~ is a css sibling selector.
I would make a class like
.photo:hover, .photo.hover {
/* CSS */
}
Then toggle class hover on the photo element.
This woul be a javascript solution, not just CSS.
You can try this:
JS
$('.name').hover(function () {
$('.photo').addClass('hover');
}, function () {
$('.photo').removeClass('hover');
});
$('.photo').hover(function () {
$('.name').addClass('hover');
}, function () {
$('.name').removeClass('hover');
});
CSS
.name:hover, .name.hover
.photo:hover, .photo.hover
demo