I have a basic overlay like this:
<div class="wrap">
<div class="overlay"></div>
</div>
.wrap {
position:relative;
}
.overlay {
position:absolute;
top:0; left:0; bottom:0; right:0;
display:none;
}
.wrap:hover .overlay {
display:block;
}
I want to put a
.??? {
transition: all .3s ease-in;
}
to ease in the overlay display. Is it possible to use a css transition when you have a pseudo element bound to the hover on an earlier element in the selector chain that displays an element later in the selector chain? (.wrap:hover .overlay) If so, for what selector? I can't get the overlay nor any of its children to pick up the transition. Can't use js here. I tried the transition on both the .wrap and the .overlay, and on children in the .overlay.
The comment from Vals is right. That is, you can't animate a transition from display:none to display:block.
Nevertheless, this doesn't mean that you can't visually create the effect. There are a couple of ways to achieve this, but the simplest way (based on your markup) is to transition your overlay div from opacity:0 to opacity:1 on hover, as demonstrated in the snippet below:
.wrap {
position:relative;
height:100px;
width:100px;
background:red;
}
.overlay {
position:absolute;
top:0; left:0; bottom:0; right:0;
height:100px;
width:100px;
background:blue;
transition: all .3s ease-in;
opacity:0; /*hide the overlay by default */
}
.wrap:hover .overlay {
opacity:1; /*show the overlay */
<div class="wrap">
<div class="overlay"></div>
</div>
Related
I have a bubble chart that looks like this currently in Chart.js:
I simply want to add labels to the chart, like this:
How can this be done?
Current code: http://jsfiddle.net/Lvc0u55v/7323/
To achieve expected result, use below option
HTML:
<section class="content" ng-app="myApp" ng-controller="ChartCtrl">
<canvas chart-data="data" chart-labels="labels" chart-options="options" chart-series="series" class="chart-bubble" id="base"></canvas>
</section>
<span id="q1">Quadrant1</span>
<span id="q2">Quadrant2</span>
<span id="q3">Quadrant3</span>
<span id="q4">Quadrant4</span>
CSS:
#q1{
position:absolute;
margin-top:-30%;
margin-left:80%;
}
#q2 {
position: absolute;
margin-top: -30%;
margin-left: 20%;
}
#q3 {
position: absolute;
margin-bottom: -30%;
margin-left: 20%;
}
#q4 {
position: absolute;
margin-bottom: -30%;
margin-left: 80%;
}
Codepen- http://codepen.io/nagasai/pen/LkmZkL
This may be a typical selection panel, which is on the desktop:
and on an mobile phone:
Can Zurb Foundation do this? I think one catch is, for medium width and up, the width of the 2 columns are supposed to be fixed, instead of dynamic. (choice 2 can have long width or short width, because the background is transparent and won't show. The importance is the fixed spacing between Choice 1, the vertical separation line, and Choice 2).
I put some desired behavior on CodePen, although they are customized for desktop and mobile, but can't be both:
Desktop: http://codepen.io/anon/pen/oxZpzg
Mobile: http://codepen.io/anon/pen/KzWZwQ
For mobile:
<div class="row text-center">
<div class="small-6 column">Choice 1</div>
<div class="small-6 column">Choice 2</div>
</div>
and it seems no way to style it for Desktop's fixed spacing.
Right now I can style the desktop version using plain CSS, and then using media query to style the mobile version, and no Zurb Foundation is used. Could Foundation be used for both mobile and desktop, or use Foundation for one case and use media query for the other case?
Just write it in SCSS, compile it into CSS and use a plain CSS. This SCSS code can do the trick:
.column {
background: #ffc;
color: #333;
padding: 20px;
#media #{$small-only} {
width: 50%;
}
&:first-child {
border-right: 1px solid #bbb;
#media #{$medium-up} {
width: 200px;
}
}
&:last-child {
#media #{$medium-up} {
width: calc(100% - 200px);
}
}
}
Compiled CSS:
body {
padding-top: 50px;
}
.column {
background: #ffc;
color: #333;
padding: 20px;
}
#media only screen and (max-width: 40em) {
.column {
width: 50%;
}
}
.column:first-child {
border-right: 1px solid #bbb;
}
#media only screen and (min-width: 40.0625em) {
.column:first-child {
width: 200px;
}
}
#media only screen and (min-width: 40.0625em) {
.column:last-child {
width: calc(100% - 200px);
}
}
Updated HTML:
<div class="row text-center">
<div class="column">Choice 1</div>
<div class="column">Choice 2</div>
</div>
CodePen link
I am trying to get an animation when you click on the button.
The animation goes from green to red, but when it ends it instantly goes back to the color of the div itself?
so it goes from green to red and then instantly back to green.
i hope it helps...
here is a working fiddle https://jsfiddle.net/rameezrami/8efnztkt or use following code
<html>
<head>
<style>
.anim-div {
width: 200px;
height: 200px;
background-color: green;
-webkit-animation-name: color-animation; /* Chrome, Safari, Opera */
-webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
animation-name: color-animation;
animation-duration: 6s;
}
.non-anim-div {
width: 200px;
height: 200px;
background-color: green;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes color-animation {
50% {background-color: red;}
100% {background-color: green;}
}
/* Standard syntax */
#keyframes color-animation{
50% {background-color: red;}
100% {background-color: green;}
}
</style>
</head>
<body>
<div class="non-anim-div"></div>
<input type="button" value="Clik here to animate" class="btn"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(".btn").click(function(){
$(".non-anim-div").addClass("anim-div");
});
</script>
</body>
</html>
I am new to web development and I've hit a road block here with swipe-pages from https://github.com/TheSeamau5/swipe-pages
Basically, I want to make a "swipe-images" out of the "swipe-pages" by putting a template inside the contents of the swipe-pages. In other words, I want to pass to the polymer-element an array of strings (location of image) as attributes and the swipe-pages in the element should auto-generate swipe-pages with images inside it.
I am trying to avoid java script as much as I can and take advantage of polymer binding. I have even extended the template as a swipe-page.
here is the code so far and it does not work as expected. Is this approach correct or should I reinvent the swipe-pages uniquely for swipe-images. But nevertheless, the template binding should work!
<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">
<polymer-element name="lesson-card-mini" attributes="items">
<template>
<style>
:host {
display: block;
position: relative;
padding: 0px;
width: 100%;
}
.content2 {
padding: 2px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
<div class="content2" style="width: auto; height: auto;">
<swipe-pages id="pgs" style="color: white;">
<template extends="swipe-page" repeat="{{item in items}}">
<img src="{{item}}" style="width: 20px; height 20px"/>
</template>
</swipe-pages>
</div>
</template>
<script>
Polymer('lesson-card-mini',
{
created: function() {
},
ready: function() {
},
toggle: function() {
}
});
</script>
</polymer-element>
<polymer-element name="select-main">
<template>
<style>
</style>
<div vertical layout center center-justified>
<lesson-card-mini style="width: 100%; height: 500px;"
items="['../images/01.png',
'../images/02.png',
'../images/03.png']"></lesson-card-mini>
</div>
</template>
<script>
Polymer('select-main',
{
});
</script>
</polymer-element>
Does anyone have a sample code on something like this?
I made the change as mentioned and I got the code working. Turns out I did not initialise the array (attribute) in the polymer-element constructor and that was really important.
The below code works,.......... and now I have an "image swipe".
<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">
<polymer-element name="lesson-card-mini" attributes="imglinks">
<template>
<style>
:host {
display: block;
position: relative;
padding: 0px;
width: 100%;
}
.content2 {
padding: 2px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
<div class="content2" style="width: auto; height: auto;">
<swipe-pages id="pgs" style="color: white;">
<template repeat="{{imglink in imglinks}}">
<swipe-page>
<img src="{{imglink}}" style="width: 20px; height: 20px"/>
</swipe-page>
</template>
</swipe-pages>
</div>
</template>
<script>
Polymer('lesson-card-mini',
{
created: function() {
this.imglinks = []; // This line is important
},
ready: function() {
},
toggle: function() {
}
});
</script>
</polymer-element>
<polymer-element name="select-main">
<template>
<style>
</style>
<div vertical layout center center-justified>
<lesson-card-mini style="width: 100%; height: 500px;"
imglinks="['../images/01.png',
'../images/02.png',
'../images/03.png']"></lesson-card-mini>
</div>
</template>
<script>
Polymer('select-main',
{
});
</script>
</polymer-element>
With this, I could just have the pages up with an array of strings. Perhaps an improvement would be to have the page decipher the link to show image, videos, PDF files, text files etc by having a template selector. And if backed by auto-animation, can become an image carousel and slider too.
Thanks and hope this helps!
JSFiddle
<div id="box">
<div id="body">Blah blah blah</div>
</div>
#box {
box-shadow: 0 0 8px black;
}
#body {
height:100px;
transition: height 0.8s ease;
}
#body:hover {
height: 200px;
}
In IE10, the shadow at the bottom of the box is glitchy when the transition changes the height of the content. Note that this only happens if it's the content box that changes height. If it's the container, the shadow works fine. However, I can't change the container's size since I want it to be dynamic to fits its contents.
Is there any workaround for this?
Best bet is to do the following. My guess is that because box-shadow is not applied to the element that's actually resizing that it can't resize with the contents. I'll need to do some more research, but this works:
Edit for Fixed Container:
Apply a transparent box-shadow to each child.
CSS:
<style type='text/css'>
.box {
box-shadow: 0 0 8px black;
}
.box .body {
box-shadow: 0 0 8px transparent;
}
.body {
height:100px;
transition: height 0.8s ease;
}
.body:hover {
height: 200px;
}
</style>
HTML:
<div class="box">
<div class="body">Blah blah blah</div>
<div class="body">Blah blah blah 2</div>
</div>
The rendering issue has been fixed in IE11. No need to worry!