I am trying to edit a wordpress template. My goal is to make movie posters look bigger than now.
This is how it looks at the moment - http://prntscr.com/i30lgt
This is how it looks when i edint height in the css - http://prntscr.com/i30ltf
The changes i made are in this css code:
.loop-container article img.attachment-post-thumbnail {
width: 100%;
height: 450px;
-webkit-transition: opacity 0.175s ease-in-out;
-moz-transition: opacity 0.175s ease-in-out;
-o-transition: opacity 0.175s ease-in-out;
transition: opacity 0.175s ease-in-out; }
How can i make them resize properly and not stretch?
May be this will help you
<div class="article">
<img alt="img" src="thumb-image.jpg" class="attachment-post-thumbnail">
</div>
<style>
.article{
display:block;
overflow:hidden;
width:100%;
height:450px;
}
.article img.attachment-post-thumbnail {
width:100%;
height: auto;
display:block;
}
</style>
Use object-fit:cover; if you want your image to cover the div or whatever.
Or, make height:auto.
object-fit:cover; will crop your image from two sides.
Related
I'm using css3, an image that when you hover over it will slides up like this
I find this example,but I want not the box's background property.
<div class="box">
<img src=image/image.jpg>
</div>
Image source is from html,not css background property
I'm just wondering if anyone can point me to a good tutorial or can help me with it?
Well I've come up with a quick example how you could do it, you can play around change values and improve it. I hope it helps.
.box{
display: block;
width: 200px;
height: 100px;
overflow: hidden;
background: black;
}
.box img{
width:200px;
float:left;
}
.box:hover img{
margin-top:-200px;
-webkit-transition: margin 1s;
-moz-transition: margin 1s;
transition: margin 1s;
}
Example:
https://jsfiddle.net/pqrnt921/1/
A pure CSS3 slide up transition effect works better if you move the transition properties to the normal state, like this:
.box{
display: block;
width: 200px;
height: 100px;
overflow: hidden;
background: black;
}
.box img{ /* Normal state */
width:200px;
float:left;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.box:hover img{
margin-top:-200px;
}
This way, on roll Out you'll get a nice transition to the original position.
If you want this to be more universal so you don't have to worry about what image you are using (I mean, you don't have to worry about image width), I propose using background-image, background-position and background-size.
Here is JSfiddle example.
Based on Joe's answer so, thanks Joe :).
For top-to-bottom sliding, you can simply use the following code.
div {
width: 400px;
height: 200px;
background-image: url('https://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fisolpro.in');
background-size: cover;
background-position: top;
transition: all 2s;
}
div:hover {
background-position: bottom;
}
<div>
</div>
BTW, I have used https://snapito.com/ to take fullpage screenshot of my website.
I use height property to animate my DIV, it appears on hover of another element - it "rolls" from top. Is there a way to rotate the animation, so I would get it to appear from bottom to top?
HTML:
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
CSS:
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.show:hover + #appear, #appear:hover {
height: 331px;
}
JSFiddle
One way to do this without using absolute positioning or altering your markup is to transition a margin-top at the same time as the height. So your CSS might look like:
html, body { background-color: #dedede; }
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
margin-top:331px;
}
.show:hover + #appear, #appear:hover {
margin-top:0;
height:331px;
}
SHOW IT
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
Here's also a JSFiddle to demonstrate. (If I've misunderstood your intentions, please tell me.)
Hope this helps! Let me know if you have any questions.
checkout the fiddle https://jsfiddle.net/8paj437a/2/
I set position:absolute to the #appear div. and bottom:0; so it will take height from bottom.
And to keep it intact from top. I placed it within a container and give position relative to the container.
HTML
SHOW IT
<div class="container">
<div id="appear">
<img src="http://data.atria.sk/matmenu/celevyk.jpg" />
</div>
</div>
CSS
.container {
width: 308px;
height:331px;
position:relative;
}
#appear {
width: 308px;
height: 0px;
overflow:hidden;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
position:absolute;
left:0;
bottom:0;
}
.show:hover + .container #appear, .container #appear:hover {
height: 331px;
}
By default, height transition works from top to bottom. But you can make it work from bottom to top with a very simple trick. All you need is to rotate the div to 180 degrees. This will rotate the transition direction as well. Try this css on your div.
transform: rotate(180deg);
See: http://jsfiddle.net/nweBD/
I'm trying to create a Coverflow like slideshow using CSS3 transitions, but I'm getting different results from different browsers:
FF; shows wanted behaviour (right slide animates from right to center).
CHROME; first positions right slide at left side, then animates to center.
IE10; does nothing
HTML:
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
CSS:
div{
position:absolute;
width: 300px;
height:100px;
background-color: yellow;
margin-left: -150px;
left: 50%;
-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;
}
.middle{
text-align:center;
z-index:2;
height:120px;
}
.left{
text-align:left;
left: 0;
right: auto;
margin-left: 0;
background-color:green;
}
.right{
cursor:pointer;
text-align:right;
right: 0;
left: auto;
margin-left:0;
background-color:red;
}
The problem here is indeed that browsers have no, or at best, various results for animating to and from 'auto'.
To fix this, I have re-written the CSS to not use left:auto; right:0; but left:100%; margin-left:-300px. This means I only have to animate the left and margin-left property, and I don't need to reset them to the default auto. The negative margin is the same amount as the width of the element, which pulls it back to the desired position, giving the same result as right:0;.
Here's an updated fiddle: http://jsfiddle.net/nweBD/3/
I am a beginner in this and I am working on my new website. But I am stuck at one point where I want the effect that will make my links fade into images. I am having a navigation-bar on top of my page and when I hover over the link, I want the text to fade out at the same time as a small logo is fading in. And when I hover out of the link I want the image to fade out at the same time as the lin is fading back in, you know?
But when I do this, the image just pops up and fades out at the same time as the link is fading out...
#navigation a[name="project"] {
-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;
}
#navigation a[name="project"]:hover {
opacity:0;
background-image:url(bilder/project.png)
}
The image is the background for the element you're fading out, so it will also fade on hover. You'll need to separate the image into a separate element.
Perhaps you could use absolute positioning inside a container to have the text cover up the image, and then when the text is hovered over, it'll fade out, revealing the image underneath.
A working example of this is at http://jsfiddle.net/y9aw7/
HTML:
<div id="container">
Example Text
<img src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
position: relative;
}
a, img {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
a {
z-index: 1;
line-height: 100px;
text-align: center;
background-color: #fff;
-webkit-transition: 0.4s opacity;
-moz-transition: 0.4s opacity;
-o-transition: 0.4s opacity;
-ms-transition: 0.4s opacity;
transition: 0.4s opacity;
}
a:hover {
opacity: 0;
}
Edit: Further jsfiddle, forked from the fiddle provided by the OP, with corrected CSS: http://jsfiddle.net/JmwdC/1
Try this :
Demo
CSS
#gl{
position:absolute;
left:0px;
width:100px;
height:30px;
opacity:0;
transition:all 0.5s;
}
#gl:hover{
opacity:1;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<a href='http://www.google.com/'> <img id=gl src='https://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif'>
Google</a>
</body>
</html>
You can use any property you want to achieve this, except display which does not work with CSS3 transition.
The most common techniques make use of
opacity (to 0)
height (to 0)
z-index (to negative / lower value than the container)
Sticking to your example, you can do it by using an background-image in <li>, and changing the opacity to the <a>, no changes to your HTML are needed.
Demo: http://jsfiddle.net/D6wuH/2/
Relevant CSS
li {
/* ... other stuff... */
background:none no-repeat scroll center center ;
}
#navigation li, #navigation li > a{
transition: all 1s ease-in-out;
}
#navigation li > a{
background: white;
}
#navigation li:hover {
background:url(http://dareminnesota.com/images/facebook-like-button.png)
no-repeat scroll center center transparent;
}
#navigation li:hover > a {
opacity: 0;
}
Playing with the difference between the initial state and the hover state of a lot of properties (was X, on hover becomes Y; wasn't there, on hover it's there; was there, on hover it's not there anymore) will let you achieve a world of different results, with weird effects like this: http://jsfiddle.net/D6wuH/0/ :)
I have a list with one item on the list transitioning to the northeast when I hover over it. Using margin-top and margin-left property transitions worked but the item being hovered over kept pushing other elements so I added position:relative and tried using top and left transition properties but it didn't seem to be working.
Here is the jsfiddle:
list hover
Add left, top default
link demo
left: 0px
Have you tried setting the parent of your list. I know sometimes relative has issue unless the underlying item is also relative or absolute. Just a thought.
Use position:absolute and it will take it out of the normal document flow. You could also give it z-index:5 to make sure it floats over other elements.
.transition{
transition: all .4s;
-moz-transition: all .4s;
-webkit-transition:all .4s;
-o-transition: all .4s;
margin-top:20px;
border:1px solid gray;
width:80px;
padding:10px;
margin-left:50px;
position:relative;
cursor:pointer;
}
.hover_top{
top:0;
}
.hover_top:hover{
top:-10px;
}
.hover_left{
left:0;
}
.hover_left:hover{
left:-10px;
}
.hover_right{
right:0;
}
.hover_right:hover{
right:-10px;
}
<div class="hover_top transition"> Hover Top </div>
<div class="hover_left transition"> Hover Left </div>
<div class="hover_right transition"> Hover Right </div>
You have to define the property where you want to apply the transition effect. For example:
.box { position: relative; transition: all 0.4s ease;}
.box:hover { top: -1rem;}
that will not work. So you have to define top: 0 by default then top -1rem on hover. like
.box { position: relative; transition: all 0.4s ease; top:0}
.box:hover {top: -1rem}
that will work.