I want to make CSS animation, based on this example. It fits me perfectly, however there are 2 things that I couldn't make. First - I want customize inner side of greeting card with two jpg files (inner-left, inner-right). Second - I want card open on click, and not click and hold.
I have tried to make it myself with trials and errors but was unsuccessful. If I include third file (inner-left) and make backface-visibility: hidden it's still not giving me required outcome. I have also tried to edit this example but still couldn't make it. For css animation savvys it should be simple, I guess, so please can anyone help me out.
This is html that I am using,
<section class="container">
<div id="card">
<figure class="front"><img src="img_card/1.jpg"></figure>
<figure class="inner-left"><img src="img_card/1-2.jpg"></figure>
<figure class="inner-right"><img src="img_card/1-3.jpg"></figure>
</div>
</section>
and the css part is in jsfiddle link.
It is possible to do this without JavaScript by using a hidden checkbox, a label and the :checked and sibling (+) selectors.
Take a look at this fiddle which also has the inner-left and inner-right images.
I had a quick look at something like this before and I think that might need to be achieved with either a javascript event that adds in a class on click to move your card to its open state.
https://davidwalsh.name/css-flip
The above link goes to an example that shows a single card flipping but it should be close to the concept you are looking for
I hope that helps
Related
I am using angular and I need to add an animation that will increase the size of the image.
<div class="card">
<div class="item images-parent">
<img src="img/carryout-icon.jpg" class="left-image"></img>
<img src="img/or.jpg" class="center-image"></img>
<img src="img/delivery-icon.jpg" class="right-image"></img>
</div>
</div>
demo:
http://play.ionic.io/app/933b5926b6da
I want to add same animation/transition to first and third image when the user clicks on it and should be removed when user clicks on the other one i.e if I click on first image, it increases in size, then if I click on the other one, first one goes back to normal and second one has that animation.
Also, I have tried doing it but I am just not able to get ngAnimate, I am not a CSS person either. Also, Any resources to help someone like me would be appreciated.
I see events such as ngView , ng if e.t.c But I do not really want these animations on such events. Only when user clicks on the image. Am I even supposed to use ngAnimate here?
I do not know which particular image you intend to increase it's size on click, but here's one way to go about it.
You can create a css class that increases the image, and you toggle on or off with NgClass, A tutorial Scotch.io
That is to make sure it changes class, but if you want to toggle on/off the class when you click CodePen snippet below
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
I've run into some trouble with Bootstrap 3.2.0. Basically, I have a header menu with some li elements and inline with that I have a simple login form.
Please see my code here
the problem is that the css in not correctly handling the left and right floated elements
Weirdly enough, everything seems to work when only a single input element is present, as you can see here
Please note that the html is taken directly from Bootstrap examples at
- http://getbootstrap.com/examples/jumbotron/
- http://getbootstrap.com/examples/dashboard/
p.s. the Jumbotron seems to work just fine with the login form but I'm guessing that is because there is no ul/li left floating menu
I'd appreciate any help you can offer
Thank you
Edit
Hey guys and thank you for replies so far. I'm not sure whether this is the expected behaviour
->
i.e. the login form is pushed to the next row, but I would expect it to collapse everything into a "mobile" type of menu before pushing the form down onto the next row.
Edit 2
p.s. the screenshot above is from Firefox 31.0 (and I see the same Chrome Version 36.0.1985.125 m)
A few ways you can handle this...
1) Customize the Bootstrap CSS so the menu collapses at a different screen size: i.e. at http://getbootstrap.com/customizer, change #grid-float-breakpoint to = #screen-md-min.
2) Add some of your own custom CSS to shrink the input fields to ~ width:100px at the right time, via a custom class added to the input-group, and a media query:
#media(min-width:768px) and (max-width:992px){
.custom-class{width:100px;} /* tweak this px-count to get exactly what you want */
}
3) Using Bootstrap's hidden/visible column classes, put the login elements within a popover for only the sm screen size. This is the "Advanced" option, and is probably overkill, but fun to try. It would be something like:
...
<div class="visible-sm">
<div class="popover" html="true">Put your inputs, button and other HTML here</div>
</div>
<div class="hidden-sm">
<input ... ><!-- Put your regular login here -->
I have an image and i need to use that as the breadcrumb background image. I tried but doesnt seem to be coming correctly. I have created a fiddle for this. Can somebody please help me what I am doing wrong. I am not supposed to change the html since teh same file is being used in other applications also. Only the css, I can change.
HTML
<div id="itemDisplay">
<span id="step1" class="step_on" title="Home">Home</span>
<span id="step2" class="step_off" title="Vehicle">Vehicle</span>
<span id="step3" class="step_off" title="Vans & Trucks">Vans & Trucks</span>
<span id="step4" class="step_off" title="Vanagon">Vanagon</span>
</div>
I have attached an image how the actual breadcrumb should look like
In my fiddle the alignment of the text is not correct except for the first text. The text should be aligned towards left. Also the last breadcrumb is not correct.
When the user is in the first page, only the first breadcrumb text should be bold, when he navigates to second page, only the second should be bold
http://jsfiddle.net/Dbudt/5/
Please advice
Updated demo
I've added .active class so you can use it on span on the page you need.
I've also fixed the padding for span.step_off
UPDATE
I fix the background-position for the last element.
I'm trying to create a simple rollover with an image to show a tip or info box/bubble.
I have a div wrapper holding the image src, and css to style/position the wrapper and child.
I just can't figure out how to make the img src interactive.
Here's the html:
<div class="wrapper">
<img src="images/gallery/wheat3.png" width="250" height="250" data-stellar-ratio="3.5" data-stellar-vertical-offset="200">
</div>
I want to create a rollover with the image "wheat3.png" to show and info box at the side.
Here's the test link as well:
http://hatfielddesign.com/witbier_test/
Thanks.
Viewing the source code of the test link you've shown, seems like they uses Stellar.js to implement this effect. Take a read at the docs, they may help you ;)
I am not a clean CSS coder, so this may be the crux of my problem... but...I've cobbled together an interactive map from this tutorial: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/.
My solution: http://www.paideiaschool.org/testing/barb_map.htm
I think I have the initial "rollovers" of the map working-- (I've only coded the first two buildings in the upper left of the map) and am happy with that.
My problem is I want the legend of the map to do the same things as the rollovers of the map. I've come up with a clumsy solution that works (labeled '1509'), but not well in all browsers, and that tells me I have gone wrong somewhere.
I'm trying to avoid javascript as well.
What is the main problem?
Here's an updated jsFiddle for part one
Here's the basics:
<div id="city-map">
<div class="pop-up">...</div>
<div class="pop-up">...</div>
...
</div>
We use an image map with anchor tags as "hot spots". We use CSS to absolutely position these "hot spots" in the proper location and we do the basic background image sprite "trick", the same you did in your original code.
However, I updated your sprite image to have two "hover" images. When making an image hover map with none-square image spots (like buildings overlapping each-other), a single hover state runs into problems with a "neighbor" icon showing up in the hot spot slice. This is due to due HTML blocks being square and not being able to draw odd shapes. We solve this by having extra images states so you can make the neighbors still look un-highlighted.
Pop-up box
<div class="pop-up">
<h1 class="title">Mac</h1>
<div class="content">Some Content</div>
</div>
All the pop-up boxes have this HTML format. I position: absolute; them off to the side with the standard left:-999em; trick. I crafted the CSS to give them a standard pop-up location with a slight space between the hot-spot box and the pop-up box. This helps ensure your mouse will "hover out" of the hot-spot when reaching for a new hot-spot. Otherwise, you'll hover over the pop-up box and it won't go away until you over off both.
<div id="city-map-legend">
<div id="glamour-photo">
<img src="..." id="mac-img" />
<img src="..." id="admin-img"/>
...
</div>
<div id="cml-list">
<h2>Around Campus</h2>
<ul>
<li><a id="mac-list" href="#">Mac</a></li>
...
</ul>
</div>
</div>
For the "map legend", I have a group of "glamour images" and a list of links. Pretty standard stuff. The key is how they're all tied together with their ID's. JavaScript will use this to swap images and CSS states as we tie the three elements (map, glamour image, and list of links) together.
ID's in the map are the straight up ID name like "mac". ID's in the glamour images are "[id]-img" (ie. "mac-img"). And ID's in the list are "[id]-list" (ie. "mac-list").
<script type="text/javascript" src="*"></script>
* = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
I recommend using jQuery to help do easy JavaScript-ing and loading it from Google API for easy Content Delivery Network benefits.
All that's really left is the JavaScript event.
$(document).ready(function() {
// highlight map when legend link is hovered
$('#cml-list a').hover(
// hover over
function(){
// get id code
var id = $(this).attr('id');
// tokenize string to get main id code
var tokens = id.split('-');
id = '#' + tokens[0];
// add active class to map id
$(id).addClass('active');
},
// hover out
function(){
// clear all .active classes from map
$('#city-map a').removeClass('active');
}
);
});
What happens above is we tell JavaScript to trigger anytime someone hovers a list link. There are two events when hovering, in and out.
When someone hovers into a link, we get the base ID value from it and all we do is apply a CSS class "active" to the map "hot spot".
".active" class will basically "turn on" the map item as if it was hovered (if you notice in the CSS, all the :hover selector styles are also shared with a '.active' class).
When we hover out, we simply tell jQuery to remove all 'active' classes. All that's left to do is swap also write some code that does the same thing for the "glamour" images. Simply turning them on (display:block) or off (display:none). The one catch is that there should probably be a default image that we always turn back on if nothing else is selected unless we just want the previously activated glamour image to stay active, that works too.
I've not gotten to that bit of code yet. I'll see I can update it later and maybe leave a little bit for you to play around with.
update
I developed it mostly in Chrome and a little Firefox. I just checked
it in IE7/8/9 and it seemed to work fine.
I updated the jsFiddle to include glamour image swapping. I also had a small CSS bug where I placed the float in the wrong spot. So, work off the latest one.
NOTE I did not do the CSS for all the locations. I did several with some examples, but left the rest for you. =)
Btw, I updated your map image and uploaded it on imgur.com => http://i.imgur.com/n7spM.png