I have two elements in a div, an image that fades in and some text that changes color, but I am unable to get them to transition at the same time. In other words, the mouse can only be over one or the other.
I tried to put the properties in the div that contains them, but that did not help.
JSFiddle example
HTML:
<div id="selectors">
<div id="omselector">
<a href="stills.html">
<img class="noglow" src="images/stills/oldcog.png" alt="Old Work!">
<img class="glow" src="images/stills/oldcogglow.png" alt="Old Work">
<p class="button">OLD WORK</p>
</a>
</div>
</div>
CSS:
.button
{
float: bottom;
width: 350px;
font-size: 20pt;
text-align: center;
font-weight: 900;
color: #FFFFFF;
left: 0;
top: 200px;
-webkit-transition: color 1s;
-moz-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
z-index: 6:
}
.button:hover
{
color: #0df400;
}
#omselector
{
position: absolute;
height: auto;
width: 300px;
top: 40%;
left: 25%;
z-index: 7;
}
.glow, .noglow
{
width: 250px;
height: 250px;
position: absolute;
left: 70px;
}
To simultaneously change the styling of both elements on a mouse event, you can take advantage of the parent element's mouse event and use #omselector and its :hover pseudo class in the selectors.
For example:
#omselector:hover .button {/*...*/}
#omselector:hover .glow, .noglow {/*...*/}
See JSFiddle demo based on your own.
Try this fiddle
One thing to note is that, try to position the images and the text inside the #omselector so they both receive the hover event. (Notice this wouldn't work of you hover over from the left side.
Related
I created the jsfiddle, to show you what i mean exactly.
When hovering over the text, it should also be possible that the background takes the effect like when hovering over the img/div. Currently the hover effect only works when hovering over the div/img and not when hovering over the text in the middle of the image.. The "a" link should work on the div and text aswell.
https://jsfiddle.net/o5sxhssv/
HTML:
<!--First image-->
<div class="category_images_item">
<a href="">
<span>Watches</span>
<div class="category_images_img" style="background:url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
</div>
CSS:
.category_images{
margin: 0 auto
}
.category_images_item{
width: 400px;
height: 400px;
position: relative;
background-color: black;
overflow: hidden;
transition: all .8s ease;
margin: 10px;float: left
}
.category_images_item span{
color: white;
font-weight: bold;
font-size: 50px;
font-style: italic;
z-index: 100;
position: absolute;
width: 100%;
text-align: center;
top: 150px
}
.category_images_img{
background-size: cover;
width: 400px;
height: 400px;
transition: all .8s ease;
opacity: 0.7
}
.category_images_img:hover{
transform: scale(1.03) rotate(-1deg);
opacity: 0.5
}
Thanks alot!! :))
just have to change your hover css rule to this:
.category_images_item:hover .category_images_img{
transform: scale(1.03) rotate(-1deg);
opacity: 0.5
}
put the hover event on your container and apply the css to the child!
EDIT: updated fiddle: https://jsfiddle.net/o5sxhssv/1/
Try this, the anchor tags container both the text and image, so you want the hover on that:
.category_images_item a:hover .category_images_img{
transform: scale(1.03) rotate(-1deg);
opacity: 0.5
}
You can use pointer-events: none on .category_images_item span
Using pointer-events: none says that the cursor does not interact with that element.
Then to make the whole area clickable, make the a element display as a block, this will make the a cover the entire area of it's parent element.
.category_images_item a {
display: block;
}
https://jsfiddle.net/o5sxhssv/2/
If you only want to change the markup, then you could rearrange your code like this:
<div class="category_images">
<!--First image-->
<div class="category_images_item">
<a href="">
<div class="category_images_img" style="background:url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
<span>Watches</span></div>
</a>
</div>
</div>
https://jsfiddle.net/tung3yx2/
I have a button with a link inside it, and an animated underline for said link. Code used from here, (example).
To make sure the underline was not huge and far below the text, I applied the animation to the text itself. The problem with this is the hover radius is to small, and I would like the entire button to be able to trigger the animation.
Here is my css and html:
.menuButtonText {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.menuButtonText:after {
content: '';
display: block;
margin: auto;
height: 2px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.menuButtonText:hover:after {
width: 100%;
background: #E0E0E0;
}
.menuButton {
width: 200px;
height: 100px;
margin: 20px;
background-color: red;
}
<div class="menuButton"><a class="menuButtonText">MenuButton</a>
</div>
<div class="menuButton"><a class="menuButtonText">MenuButton</a>
</div>
<div class="menuButton menuButtonSelected"><a class="menuButtonText">MenuButton</a>
</div>
The "menuButton" class is the parent and much larger than the space the text takes up, which is the trigger I wanted, I can't seem to get other solutions to work, and I'm assuming thats because of the ":after".
This what you're after?
http://jsfiddle.net/19mdzLdk/
I added this css:
.menuButton:hover .menuButtonText:after {
width: 100%;
background: #E0E0E0;
}
Now on div hover, the text underlines.
I want to display images as circle on my webpage. For that, I have an image set as background wrapped inside a div container. Both the divs (outer and inner) have been given a border radius of 50% to achieve this. I also want the image to zoom in oh hover, for which I have applied transform:scale on the inner div.
The image is getting clipped a bit from left and right sides so it doesn't appear as a perfect circle. However, when the image gets scaled up on hover, the image forms a perfect circle. I have tried re-positioning it with background position, tried using a bigger image, increased/decreased size of both divs, but no method is working.
Further, when the image gets zoomed in on hover (using transform:scale), it gets re-positioned slightly after the transformation is complete. Strangely, if I remove the transition effect (transition duration and transition-timing-function), then this re-positioning doesn't happen.
Can anybody figure out why this is happening and what is the solution?
I am using bootstrap (I know it has a class img-circle which draws circle, but I wish to use my own code).
You can see the code running here: http://jsfiddle.net/dk49/h9KZr/
Observe the clipping of image on left and right sides of the circle and how it gets into correct shape on hovering over it. You can also see the jittering of image on zooming when hovering over it.
<div class="container-fluid page-content-wrapper">
<div class="col-xs-12 col-sm-4">
<div class="circle-container">
<h2 class="img-header">Men</h2>
<div class="inner-circle img-men"></div>
</div>
</div>
</div>
CSS:
.page-content-wrapper {
max-width: 980px;
margin-left: auto;
margin-right: auto;
background-color: #000;
}
.circle-container {
max-width: 325px;
max-height:325px;
border-radius: 50%;
overflow: hidden;
position: relative;
margin: 20px auto 0 auto;
z-index: 5; /* for fixing chrome bug */
}
.inner-circle {
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
transition: transform 0.15s ease-in-out;
}
.inner-circle:hover, .inner-circle:active {
transform: scale(1.1);
}
.circle-container:hover .img-header, .circle-container:active .img-header{
bottom: 30%;
background-color: rgba(255,255,255,0.9);
}
.img-header {
color: #fff;
bottom: 10%;
position: absolute;
width: 100%;
color: #000;
background-color: rgba(255,255,255,0.7);
font-size: 25px;
font-weight: 500;
padding: 7px;
text-align: center;
height: 43px;
vertical-align: middle;
z-index: 1;
transition: bottom 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.img-header:hover ~ .inner-circle, .img-header:active ~ .inner-circle {
transform: scale(1.1);
}
.img-men {
background: url(http://s8.postimg.org/qohfig4md/men.png) center center no-repeat;
background-size: contain;
}
i've just made social media icons for my website. i wanted to look them a bit more interesting, so i put overlays on them, which appears, when you moving the hover over it.
i've tried to use
#bla:hover {
background-image: overlay.png;
}
but it didn't worked. Link here: http://tdfts.com/projects/akvile_test/
I also tried this (sorry i cannot really explain :D): http://tdfts.com/projects/akvile_test/website/
But this still did not work well, and looked awful in ie and ff.
do not mind the position of the social media bar.
the overlay should have a transition.
thank you in advance
Demo ..
CSS
.social-item{
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
float: left;
margin: 5px;
}
.social-item .original{
width: 100%;
height: 100%;
}
.social-item .over{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.social-item:hover .over{
opacity: 1;
}
HTML
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fb.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fbhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitter.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitterhover.png" class="over" />
</div>
<div class="social-item">
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/google.png" class="original" />
<img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/googlehover.png" class="over" />
</div>
Hope this will help you ..
According to your style above, instead of that you should use
#bla:hover {
background-image: url('overlay.png');
}
The url inside should have the correct location.
Regarding the position, you need to make the div which contain the overlay.png should be absolute. [position: absolute; top: 0;]
And make sure the parent a should be relative or absolute
You have
#fb {
height: 40px;
width: 40px;
background-image: url(img/socialmedia/fbhover.png);
}
in your style.css (line 72) thats causing the background-image to be applied automatically. Instead, you would want something like:
#fb {
height: 40px;
width: 40px;
}
#fb:hover {
background-image: url(...);
}
However, I doubt this is what you want. Setting a background-image on an <img src="foo.png"> will just show the background-image behind foo.png, and I'm guessing you want to replace the image entirely.
So you have two options:
1) Easier: Use jQuery's .hover() and .attr("") change the src of the <img> with Javascript.
2) Harder / Uglier (but doesn't require JS): Make two divs, one on top of the other. Make your default image be on the bottom and the hover one be on the top. Set the top div's opacity to 0 and then do a CSS :hover selector that changes the top div's opacity to 1. Frankly, I'd go with the first option.
You can apply some css like I did for facebook overlay
#overlayfb {
position: absolute;
height: 40px;
width: 40px;
z-index: 1;
background-image: url(img/socialmedia/fbhover.png);
top: -25px;
}
top in -25px;
use this
#overlayfb:hover {
top: -25px;
}
I think it will work for you
I have a few pictures in a table that they work as a link and in hover a play button should appear over them.
I tried many different tricks but they all have problems which dont work properly. I decieded to share my question here to find an standard solution.
Here is what I have done so far:
img{
position: relative;
}
img:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
min-height: 100px;
position: absolute;
left: 0;
}
I dont know if I am in the right direction or not, but have a look at the demo http://jsfiddle.net/jmXdh/8/ and if it is wrong then please let me know any other way.
You unfortunately can't use the ::before and ::after pseudo-elements with replaced elements. The content of all replaced elements is outside the scope of CSS.
From the Generated and Replaced Content Module (WD):
Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
Here's something that might work, assuming you can add additional markup:
http://jsfiddle.net/isherwood/jmXdh/11/
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://placehold.it/80x80) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -50px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
<b>Video test</b>
</a>
Or with a transition effect:
http://jsfiddle.net/isherwood/jmXdh/12/
.play {
opacity: 0;
transition: opacity 0.3s;
}
a:hover .play {
opacity: 0.7;
}