I am creating a single-page website where my content slides across the page (from left to right, easing in over 1s) when a link is clicked on. Unfortunately, I am having absolutely no luck with getting transitions to work.
I can get the .content class to transition using :hover, but cannot seem to achieve any transition/animation effects otherwise. Ideally, I would like the #home, #portfolio, #contact and #cv to be the elements that slide in, but have had no luck for hours now.
I wonder if it is due to the set up of having a sleeve containing all of my slides?
This is my CSS code for the relevant section:
#sleeve {
position: relative;
top: 35%;
width: 400%;
z-index: 2;
height: 60%;
}
#home, #portfolio, #contact, #cv {
background: aqua;
width: 25%;
margin: 0;
position: relative;
z-index: 2;
float: left;
height: 100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#home:target ~ #header #navigation #home,
#portfolio:target ~ #header #navigation #portfolio,
#contact:target ~ #header #navigation #contact ,
#cv:target ~ #header #navigation #cv {
background: white;
margin-left: 0%;
}
.content {
width: 70%;
min-height: 40%;
margin-left: 15%;
margin-right: 15%;
margin-top: 2%;
background-color: white;
z-index: 5;
position: relative;
}
and this is my HTML:
<body>
<div id="header">
<div id="navigation">
<a id="link-home" href="#home"> home </a>
<a id="link-portfolio" href="#portfolio"> portfolio </a>
<a id="link-contact" href="#contact"> contact </a>
<a id="link-cv" href="#cv"> cv </a>
</div>
<h1> ---- :</h1> <h2>portfolio and work</h2>
</div>
<div id="sleeve">
<div id="home">
<div class="content"><p> home</p> </div>
</div>
<div id="portfolio" class="panel"> <p> portfolio </p> </div>
<div id="contact" class="panel"> <p> contact </p> </div>
<div id="cv" class="panel"> <p> cv </p> </div>
</div>
<div id="footer"> copyright ----- 2013 </div>
</body>
I would be eternally grateful for anyone's help!
From the way you have it set up, it looks like you are trying to create a carousel that is responsive? If that's the case you will still need some JS to update the css, like add another class. At the moment there is nothing to transition as your css is not changing.
Check this, it will help you to understand, this is made in Jquery, but you can find another solution more hard coded(if this doesn't solve your problem I can help).
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_trans_reverse
if <a href="#pagetwo" data-transition="slide"> it will slide to the div with id "pagetwo"
if <a href="#pageone" data-transition="slide" data-direction="reverse"> it will do an reverse data-direction and will come back to the div with "pageone" and will slide in the reverse way.
Hope this helps.
Related
I am trying to implement something like this letter on an image with blending mode.
Here is my fiddle
<div id="box">
<div id="image">
<img src="https://www.epicurrence.com/images/speakers/julie.jpg" />
</div>
<div id="overlay">J</div>
</div>
Can't make it work.
You are currently using background-blend-mode on your img. background-blend-mode is used to blend multiple background images or colours applied to the same element.
mix-blend-mode allows you to apply blending to arbitrary elements that are stacked. in your case you should be using mix-blend-mode on the top most element (.overlay).
#box {
height: 1000px;
background-color: white;
}
#image img {
position: relative;
}
#overlay {
color: green;
position: absolute;
bottom: -300px;
font-size: 1000px;
text-transform: uppercase;
transition: transform 0.9s ease-in-out;
mix-blend-mode: multiply;
}
<div id="box">
<div id="image">
<img src="https://www.epicurrence.com/images/speakers/julie.jpg" />
</div>
<div id="overlay">J</div>
</div>
I'm looking for a plugin/code that can give some nice mouse hover animation over addThis share buttons, but still want to enjoy the 1-click tweet,like,etc. feature of addThis default buttons.
The one i have now is default, looks like,
What i want is something similar to the one used in arduino.cc blog, the default 1-click buttons are hidden by default and get visible only on mouse hover.
eg:-
How can i achieve this?
You can do this placing custom Images with actual sharing buttons together.
Keep all the sharing button width 0 by default and make them visible on hover by increasing width.
Also add CSS transition to expend the buttons smoothly.
Consider this example.
.sharing-buttons {
float: left;
margin: 5px;
}
.share-button {
float: right;
margin-left: 5px;
overflow: hidden;
transition: all 0.6s ease 0s;
white-space: nowrap;
width: 0;
}
.sharing-buttons:hover .share-button {
width: 100px;
}
<div id="wrapper">
<div class="sharing-buttons fb">
Custom Image
<div class="share-button">Button iframe</div>
</div>
<div class="sharing-buttons tw">
Custom Image
<div class="share-button">Button iframe</div>
</div>
</div>
Edit: Final addThis code & CSS
.addthis_toolbox a.at300b, .addthis_toolbox a.at300m {
padding: 5px;
width: auto;
}
.social-container {
float: left;
margin: 5px;
width:auto;
}
.social-content {
float: right;
margin-left: 5px;
overflow: hidden;
-moz-transition: max-width .3s ease-out;
-webkit-transition: max-width .3s ease-out;
-o-transition: max-width .3s ease-out;
transition: max-width .3s ease-out;
white-space: nowrap;
max-width: 0;
}
.social-container:hover .social-content {
-moz-transition: max-width .2s ease-in;
-webkit-transition: max-width .2s ease-in;
-o-transition: max-width .2s ease-in;
transition: max-width .2s ease-in;
max-width: 95px;
}
<div class="addthis_toolbox addthis_default_style ">
<!-- FACEBOOK -->
<div class="social-container">
<img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="" />
<div class="social-content">
<a class="addthis_button_facebook_like at300b" fb:like:layout="button_count"></a>
</div>
</div>
<!-- G+ -->
<div class="social-container">
<img src="<?php bloginfo('template_directory'); ?>/images/gplus.png" alt="" />
<div class="social-content">
<a class="addthis_button_google_plusone" g:plusone:size="large"></a>
</div>
</div>
<!-- TWITTER -->
<div class="social-container">
<img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="" />
<div class="social-content">
<a class="addthis_button_tweet at300b"></a>
</div>
</div>
</div>
I have two pretty similar code snippets using CSS tricks as my lesson (http://css-tricks.com/video-screencasts/93-css3-slideup-boxes/). I'm using Bootstrap with ruby on rails.
1st:
<div class="row center">
<div class="col-md-3 slide-up-captions">
<a href="#">
<h5>Absolute Me</h5>
<div>Some other text...</div>
</a>
</div>
<div class="col-md-3 slide-up-captions">
<a href="#">
<h5>Absolute Me</h5>
<div>GSome other text...</div>
</a>
</div>
<div class="col-md-3 slide-up-captions">
<a href="#">
<h5>Absolute Me</h5>
<div>Some other text...</div>
</a>
</div>
<div class="col-md-3 slide-up-captions">
<a href="#">
<h5>Absolute Me</h5>
<div>Something else...</div>
</a>
</div>
</div>
and 2nd:
<div class="slide-up-captions row center">
<a href="#" class="col-md-3">
<h5>absolute me</h5>
<div>Some other text...</div>
</a>
<a href="#" class="col-md-3">
<h5>absolute me</h5>
<div>Some other text...</div>
</a>
<a href="#" class="col-md-3">
<h5>absolute me</h5>
<div>Some other text...</div>
</a>
<a href="#" class="col-md-3">
<h5>absolute me</h5>
<div>Some other text...</div>
</a>
</div>
CSS for both:
.slide-up-captions a {
display: block;
background: $lightBlue;
border: 1px solid $grayMediumLight;
height: 65px;
margin: 0 0 20px 0;
overflow: hidden;
}
.slide-up-captions h5 {
height: 65px;
text-align: center;
line-height: 65px;
-webkit-transition: margin-top 0.2s linear;
}
.slide-up-captions a:hover h5 {
margin-top: -65px;
}
.slide-up-captions div {
height: 45px;
padding: 10px;
opacity: 0;
-webkit-transition: all 0.3s linear;
-webkit-transform: rotate(6deg);
}
.slide-up-captions a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
}
These display differently and the 1st allows nth child selection of the in the .slide-up-caption class, whereas the 2nd does not (I know I could use ID).
When I add Margin to the left and right of .slide-up-captions a {}, it causes the 2nd to wrap to a new line, which is not the effect I am going for.
I have used the Developer Tools to inspect and both are very similar.
1st
Row: 970x85 with -15 left and right margin
Col-m-3: 212.5x85 with 15 left and right padding
a: 210.5x63 with 1px border and 20 bottom margin
2nd
Row: 970x85 with -15 left and right margin
a col-m-3: 210.5x63 with 15 left and right padding and 1px border and 20 bottom margin
GOAL: I would like to have the spacing of 1st with the nth child ability of the 2nd. Perhaps there is something going on with the gutter of bootstrap and how it does math? Any help in resolving is much appreciated. I've already searched and trial/errored for hours.
Alright, the best I could come up with to make there be whitespace between the equal columns was to add margin to the inner component, in this case the and the within the
You can also play with the nth child selector to make the 1st and only have right margin, and then the last nth child to make the and only have left margin. This makes the boxes take up the full row.
Hope this works for other people too.
.slide-up-captions a {
display: block;
// background: $lightBlue;
// border: 1px solid $grayMediumLight;
height: 65px;
padding: 0px; //**** added this
margin: 0 0px 20px 0px;
overflow: hidden;
}
.slide-up-captions h5 {
height: 65px;
text-align: center;
line-height: 65px;
margin: 0 10px 0 0px;
background: $lightBlue;
-webkit-transition: margin-top 0.2s linear;
}
.slide-up-captions a:hover h5 {
margin-top: -65px;
}
.slide-up-captions div {
height: 45px;
padding: 10px;
margin: 0 10px;
opacity: 0;
-webkit-transition: all 0.3s linear;
-webkit-transform: rotate(6deg);
}
.slide-up-captions a:hover div {
opacity: 1;
-webkit-transform: rotate(0)
}
I have this code which works fine in Firefox and IE, but not in Chrome. What it does is, it starts a slide image animation, over existing image when the cursor is on it. Is there any part of the code that Chrome does not support?
<td width="214">
<div style="margin-left:19px; margin-top:-8px">
<div class="wrapper">
<img src="icon1.png">
<a href="http://www.somesite.com" target="_blank">
<img id="slide" src="slide_img.png" />
</a>
</div>
</div>
</td>
.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
}
#slide{
position: absolute;
left: -197px;
width: 197px;
height: 162px;
background: transparent;
transition: 0.5s;
}
.wrapper:hover #slide {
transition: 0.3s;
left: 0;
}
The problem was in the first image in the wrapper. Try providing a bacground to the div rather than using the img tag
Fiddle
Modified html
<td width="214">
<div style="margin-left:19px; margin-top:-8px">
<div class="wrapper" >
<a href="http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg" target="_blank">
<img id="slide" src="http://3.bp.blogspot.com/-9qLJXsHoVag/T_rA4WlE-PI/AAAAAAAAB0I/I4gHxidRYEY/s320/kaka.jpg" />
</a>
</div>
</div>
</td>
and css
.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
background:url('http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg')
}
You need to give Prefix for this
.cssname
{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
There is a div, and an image inside that div, all margin set to 0 - however it keep showing a gab INSIDE the div, not even out side, it's not padding or margins and I can't seem to figure out what it is.
I have tried to change the Div's to sections, give them negative margins, make the height 100% but nothing works!
Here is the link to the site: http://www.webdesignstudents.co.uk/students/loai_shehadeh/1/portfolio.html
You can see the full code by View the Page Source, but here is the HTML I am using is this:
<div class="wrapperB">
<div class="content">
<div id="portfolio-sectionB" class="all">
<div id="grid1"><!--Gird 1-->
<div class="galleryItemB visualIdentity">
<img alt="Brighton and Hove In Bloom Logo" src="portfolio/images/brighton-in-bloom-logo-mockup-1.jpg">
</div>
<div class="galleryItemB visualIdentity">
<img alt="" src="portfolio/images/hovecollege-course-magazine-mockup2.jpg">
<p>Click To View Project</p>
</div>
<div class="galleryItemB visualIdentity">
<img alt="" src="portfolio/images/brighton-pet-show-poster-mockup3.jpg">
<p>Click To View Project</p>
</div>
</div><div id="grid2"><!--Gird 2-->
<div class="galleryItemB visualIdentity">
<img alt="" src="portfolio/images/ambition-world-bussiness-card-mockup.jpg">
<p>Click To View Project</p>
</div>
</div><div id="grid3"><!--Gird 3-->
<div class="galleryItemB visualIdentity">
<img alt="" src="portfolio/images/brighton-pet-show-logo-mockup.jpg">
<p>Click To View Project</p>
</div>
<div class="galleryItemB webDesign visualIdentity">
<img alt="" src="portfolio/images/animal-recuse-group-logo-mockup.jpg">
<p>Click To View Project</p>
</div>
</div>
</div>
</div>
</div>
The CSS
#portfolio-sectionA {
margin: 10px 20px;
}
#portfolio-sectionA a {
color: #CED9E7;
padding: 7px 10px;
margin-left: -1px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#portfolio-sectionA a:hover {
color: #9BAFCE;
}
#portfolio-sectionA a:active, #portfolio-sectionA a.portfolio-sectionAClicked {
color: #4E6C98;
background-color: #3C5476;
cursor: default;
}
/*---Portoflio Page Section B---*/
.galleryItemB {
background-color: green;
position: relative;
}
#portfolio-sectionB .galleryItemB a {
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
background: url(../elements/magnifying-glass.png) center center no-repeat rgba(78,108,152,.85);
cursor: pointer;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
#portfolio-sectionB .galleryItemB:hover a {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter:alpha(opacity=100);
}
#portfolio-sectionB .galleryItemB a p{
color: #FFFFFF;
position: absolute; bottom: 15px; right: 20px;
cursor: pointer;
}
Change the styling on the images within the div's to display:block.
Ex:
itemWrapper > img {
display:block;
}
img is inline-lbock element and a is inline element. Hence simple text whitespaces appear between them.
In your CSS file you add paddings, margins and borders and stuff.
Then you have an use all classess in your html file.
This might be one of the divs that causes the problem.
You added the padding and other offsets by including all classes, it includes all css classes.
In your css class you have an #portfolio-sectionB part with offsets.
If you really don't know what it is you could always comment out all the CSS properties in the CSS file and enable them one by one while checking if the bug returns.
And fix the spelling mistakes in your html comments: change Gird into Grid.
I'm not sure if this is what you mean but it seems that the links itself have a padding. This results in a white border around the images.