A site I'm working is in need of a page for an upcoming event that's a bit of a one-off. Most pages have a mast banner image in the template that spans the full width of the page. On most pages this image just shrinks on small screens. However, on this new page it's a requirement that it switch to a different image at a certain width.
Since this site is in Drupal, I'm a bit hesitant to modify the theme for this one temporary page. Ideally, I'd like to be able to set the default image so that it includes the standard region used in the rest of the site.
If I included the image, would it then be appropriate on small screens, when the image needs to switch, to set display: none; on the <img> and apply a background image to the container div? I think this would work but it seems like a bit of a workaround.
Is there a better way around this?
The image region is simply an <img> nested in a series of <divs>.
The work around you mention is quiet easy to achieve. In this FIDDLE I have just added:
#media (max-width: 600px) {
img {
opacity:0;
position:relative;
z-index:-1;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
just to make a transition but a simple display none is as valid while you can add the background image to the image container div. (the z-index is to set the image behind whatever content you may have in the div, specially links)
Related
I'm sure this is a pretty simple one but can't find the specific answer I'm looking for elsewhere.
Basically, I have a series of side by side images set out in a responsive grid layout. As you hover over each image it zooms and scales the image bigger so it looks like it's coming out towards you.
However, the issues I have is that the later image always overlaps the prior image. I have tried setting all the divs containing the image to the same z-index but to no avail.
I have setup a js.fiddle which demonstrates the issue. I'm hoping to solve with purely CSS.
JSfiddle link http://jsfiddle.net/Aloha_Design_Co/46poxw9j/
Any ideas would be most appreciated.
Thanks,
Heath
Simply, give more z-index in .photo-content:hover.
.photo-content:hover {
background-size: 120%;
/* in conjuction with the transition below it zooms in on the background image - doesn't change box size in itself; */
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
transform: scale(1.2);
/* expands the box to look like it is 3D coming out of page */
/* Add z-index */
z-index: 10;
}
Jsfiddle
I am trying to place this header in the css but without luck i tried placing it in width container but its just repeating itself.
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/Y5a5qUNx6jvD9pN6AH5VMslP656QnElptjDvGKR65Fk.jpg) no-repeat;
Edit to add css code
.width-container, .flex-caption .slider-container {-moz-transition: all
.2s ease-in-out; -webkit-transition: all .2s ease-in-out;
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/Y5a5qUNx6jvD9pN6AH5VMslP656QnElptjDvGKR65Fk.jpg) no-repeat;}
If you look at the source in css you will c width container at line 41
I trying to add the header for all pages from here
http://outpostmotorsports.com/OPMSwordpress/inventory/1989-harley-davidson-sportster/
Note 2
Its still showing it three times
Try it like this:
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/wp_header.jpg)
background-repeat: no-repeat;
The background-repeat property sets if/how a background image will be
repeated.
By default, a background-image is repeated both vertically and
horizontally.
Tip: The background image is placed according to the
background-position property. If no background-position is specified,
the image is always placed at the element's top left
Source: (w3schools)
Good luck!
If you are using this code
.width-container,
.flex-caption .slider-container {
-moz-transition: all
.2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/Y5a5qUNx6jvD9pN6AH5VMslP656QnElptjDvGKR65Fk.jpg) no-repeat;
}
then you are adding the background image to more than one element.
I'd suggest you try adding a new rule:
.width-container{
background:url(http://outpostmotorsports.com/OPMSwordpress/wp-content/uploads/2015/09/Y5a5qUNx6jvD9pN6AH5VMslP656QnElptjDvGKR65Fk.jpg) no-repeat;
}
If I have a series of divs all with float: left and I resize the browser so they wrap, can I animate their transition to their new location using only CSS animations (no JavaScript)?
Without using JavaScript that's most likely a no...
CSS transitions and animations rely on the elements' CSS properties changing. The line wrap behavior you're seeing when the window is resized doesn't change the elements' properties, so you won't have anywhere to add a transition.
Even with JavaScript I doubt creating the effect you're after would be trivial, you may want to check out a plugin like Masonry
You can try use transistions, but I think that in your example it's not possible without JS.
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
hi there i am currently trying to make a search box(.pullDown) that animates when you :focus on the textbox(.name) and it should change the size of the div below is the code i tried but it only changed the textbox size not the div i wondered if anyone has any advice on how to make it only change the div height i have tried experimenting with nesting classes but could not get the right results
.pullDown{
height: 150px ;
-webkit-transition: width 1s ease, height 1s ease;
-moz-transition: width 1s ease, height 1s ease;
-o-transition: width 1s ease, height 1s ease;
-ms-transition: width 1s ease, height 1s ease;
transition: width 1s ease, height 1s ease; ;
}
.name:focus, .pullDown{
display:block;
height:276px !important;
}
thanks very much for your help
p.s. i am looking for a css way to do it only if possible
So what you want to do is when the textbox is selected change the height of .search, which is a parent element of the textbox?
Unfortuantly this is not possible. Css does not support parent selection. You can do this however with javascript/jQuery so when the textarea is focused you change the height of .search.
jQuery example
Based on your fiddle, I see that there are a few errors that need to be handled correctly.
First, changing the display value of an element will have the same result as readding the element, why no transitions will ever be triggered. To solve this, you will need to make sure that the input has the same display value both before and after focus (for example block in this case).
Secondly, you are adding transitions to the container div and not the actual input element that you are changing the height of. Transitions are not inherited if that is what you are assuming. You should thus move the transition to .name instead.
Thirdly, animation should only be applied between to distinct values, especially when working with input elements who have a tendency to render rather strange between different browsers. In this case, you can for example set the height of .name to 1em or similar.
Lastly, for some reason you first set the height of .pullDown to 150px, but then you immediately after overwrites this to 276px. If you want the div to change size when the field is in focus, this is not the way to do this (actually, it's currently not possible to select the parent of an element with CSS). Comma separated selectors are entirely disjunct from each other. A solution to this can be to replace the height attribute with a min-height. This will ensure that the div expands to fit the form if it grows larger than the div.
Here's a fiddle to help you out
Hopefully this will help!
I have a problem with the CSS transition property.
I need to declare two transitions for a section-tag. Every transition with the section should have a duration of 1s, only the background should have a duration of 0.3s
So my CSS-transition code would look like that:
section{
background: black;
transition: all 1s ease, background 0.3s ease;
}
section:hover{
background: green;
transform: translateY(100px);
}
But when I hovering the link now, the background get animated in 1s and it blinks strangely.
Here the codepen Demo
Someone know why this happend? And how can I realize my goal?
And yes, I need the all property!
EDIT
Just found a strange one. In the linked codepen above, it blinks. But when I animate also the padding, it stop blinking! But the background will be animated in 1s...
Here's the second demo
I have tried this in code pen, the problem not in the transition property.
Better you use div tag for the link background and create separate transition for that.
Surely div tag will give the best solution for your problem.
The problem occurred because as you hover over the element, it starts moving downwards.
When the element is not hovered, it would revert back.
Now as you hover, the elements starts moving and then loses the hover immediately which causes it to return to original state but again gains the hover effect as it again receives the mouse-over event which also cause blink, and the strange phenomenon you observed.
If you place mouse close towards the bottom, you observe the desired effect.
The fix should be that you write a hover for the container that contains these elements and apply the effect to these elements.
Besides you've applied transition in only 1 state which also may be the reason for blink;
try using transitions to both the statements like below:
section{
width:300px;
height:300px;
background:black;
color:white;
transition: background 0.3s ease, all 3s ease;
}
section:hover{
background:green;
transition: background 0.3s ease, all 3s ease;
}