I have managed to get a text showing when having the cursor over an image, but now I want to position it so that it appears on the image, preferrably in the center of it. And I would also like to change the font size of it. As I am new to web development I am not sure how to arrange this.
JSFiddle with necessary info: http://jsfiddle.net/gGvb2/
HTML:
<article class="art-1"> <img src="nutrition.jpg">
<span>Nutrition</span></article>
CSS:
span {
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
}
img {
width: 462px;
}
img:hover ~ span {
opacity: 1;
}
Any help is greatly appreciated!
I'd suggest relatively positioning the parent article element, and then absolutely positioning the span element relative to it. I'm not sure where you want the span to appear, but in this example it has a width of 100% and has text-align:center for horizontal centering.
UPDATED EXAMPLE HERE
span {
opacity: 0;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
img:hover ~ span, span:hover {
opacity: 1;
font-size:20px;
font-weight:bold;
}
article {
position:relative;
display:inline-block;
}
article span {
position:absolute;
top:10px; left:0;
width:100%;
text-align:center;
background:white;
}
Related
I have the following class:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
}
I modified the class like this:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
What I tried to do was to apply a transition so that the div is not initially shown when the page is opened but it reaches opacity: 1; after 1s has passed.
I did some research and all I could find on SO and Google was related to hovering. I tried applying "opacity: 0;" to my class but then the transition wouldn't take place, the div would just stay hidden.
Is there any way to accomplish an opacity transition without a hover state using CSS?
You can accomplish this with CSS3 animation:
.dot{
width:40px;
height:40px;
position:absolute;
background:url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size:100% 100%;
z-index:999;
pointer-events:none;
animation:fadeIn 1s ease-in;
}
#keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
<div class="dot"></div>
You can achieve this using css animations.
The animation is set using the #keyframes rule. To illustrate in the example, I removed the margin top; this is not a necessary change in your code.
.dot {
width: 40px;
height: 40px;
position: absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index: 999;
// margin-top:-60%;
pointer-events: none;
animation: fadein 1s ease-in;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="dot"></div>
Yes, use JavaScript to trigger the transition. That is the answer to your question. A transition only happens when there is something to transition to. Just sepcifying a transition on an element does not trigger the transition. Change does. When the element first loads there is nothing to transition to.
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.
Here is my site: http://www.matthewtbrown.com/newsite/index.html
I want to rollover and the type to be over of the the image and 10px from the top and the left. I don't want to the type to appear until I rollover.
I'm referring to the type that I want over each thumbnail of my portfolio. For instance, in the top left image of my portfolio, I want the type to read "Avid Interplay Production Brochure" and to be over the image.
Here is some of my css:
.item {
background: #136073;
border-style:solid;
border-color:#fff;
border-width:1px;
}
.item img:hover {
opacity: 0.3;
}
.item .text {
top:10px;
left:10px;
}
.item .text:hover {
opacity: 1;
}
It looks like you want to show the descendant .text element when hovering over an .item element (which presumably includes a descendant img element). If that's the case then you just want to put the :hover pseudo-selector on the .item selector, not the descendant selectors:
.item {
background: #136073;
border-style:solid;
border-color:#fff;
border-width:1px;
}
.item:hover img {
opacity: 0.3;
}
.item .text {
position:absolute; /*Notice this was added to correctly position the element*/
top:10px;
left:10px;
}
.item:hover .text {
opacity: 1;
}
ALSO
To set opacity in a cross-browser fashion, you'll need some IE specific properties set:
opacity : 0;
zoom : 1;
filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter : alpha(opacity=0);
BONUS
You can animate the opacity change in modern browsers by setting a transition property for the img and .text elements:
.item img,
.item .text {
-webkit-transition : opacity 500ms ease-in-out;
-moz-transition : opacity 500ms ease-in-out;
-ms-transition : opacity 500ms ease-in-out;
-o-transition : opacity 500ms ease-in-out;
transition : opacity 500ms ease-in-out;
}
Demo here: http://jsfiddle.net/LJnEH/1/
Ok, it was an issue where I needed one element, the .item, to be be relative, but the .text to be absolute.
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.