I have developed an CSS and HTML code to create some kind of accordion multi-banner. I'm not using javascript at all.
Every thing works fine,except for I issue I can not resolve:
Start point is the first image "expanded"
If you hover over some other image, the former hovered one srinks,and the current also expand. Remainig ones accomodate their witdh
PROBLEM: if you hover fast from left to rigth to the last image you come to a point where you can over a greyed on (wrapper background) and all iamges remain then collapsed.
A must should be that,always, no matter what, there's at least one image expanded to show let's say an ad,product to choose...
How can I resolve that? The reason I'm not using width:auto is that it currently doesn't make any transitions with that value set.
CODE at http://jsfiddle.net/7NR4Y/
<style type="text/css">
#wrapper div.sector {
width:50px;
height:250px;
background-position:top center;
background-repeat:no-repeat;
float:left;
max-width:300px;
opacity:0.5;
overflow:hidden;
-webkit-transition:all 1s ease-out; /* Chrome y Safari */
-o-transition:all 1s ease-out; /* Opera */
-moz-transition:all 1s ease-out; /* Mozilla Firefox */
-ms-transition:all 1s ease-out; /* Internet Explorer */
transition:all 1s ease-out; /* W3C */
}
#wrapper #first{
width:300px;
max-width:300px;
min-width:50px;
opacity:1;
}
#wrapper:hover div.sector{
width:50px;
max-width:100%;
opacity:0.5;
}
#wrapper:hover #first{
width:50px;
max-width:100%;
}
#wrapper div.sector:hover{
width:300px !important;
opacity:1;
}
</style>
<body>
<div id="wrapper" style="width:500px; height:250px; background-color:#CCC; overflow:hidden; position:relative;">
<div id="first" class="sector" title="Imagen 1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTpTF_3Pjjnsum_miN1hicvsPb-44qUm4Qban2_MfzEHevwK0_" /></div>
<div class="sector" title="Imagen 2"><img src="http://1.bp.blogspot.com/-dazqpbQnahc/UaxhFz6mwgI/AAAAAAAAGJQ/pVhtFcqEBiY/s640/Ideal-landscape.jpg" /></div>
<div class="sector" title="Imagen 3"><img src="http://2.bp.blogspot.com/-XegWV6RbUmg/UKIA7m7XgDI/AAAAAAAAAtA/6yQKXMkTjmA/s640/village-vector-the-dock-pixels-tagged-beach-landscape-512305.jpg" /></div>
<div class="sector" title="Imagen 4"><img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" /></div>
<div class="sector" title="Imagen 5"><img src="http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg" /></div>
</div>
I have added the following to your CSS
a:last-child div.sector {
position: relative;
overflow: visible !important;
}
a:last-child div.sector:after {
content: "";
position: absolute;
left: 100%;
top: 0px;
height: 100%;
width: 100px;
background-color: green;
}
This creates a pseudo element after the last div of your series.
This pseudo will receive the hover state and transmit it to the element. This, way, even if the cursor goes in the zone of the wrapper that gets exposed sometimes, it will still get it selected.
I have it green so that you can se what is happening, of course in production make it transparent.
fiddle
Disregard all the previous answer !
All you need is
a:last-child div.sector {
overflow: visible !important;
}
fiddle 2
Related
hi i want to make a effect like this to my div on a hover:
website with the effect, hover over the people div's to see
I have tried to make a grid but I am strugling to get the hover effect on top of the div.
my codepen link, need the hover on the blocks
You'll need a container div and at least one foreground div to cover the background (could be just an image). Then you'll want to target the parent on hover and change the foreground child. I used transform instead of animating a position property because it's more performant.
.card{
position:relative;
width:200px;
height:200px;
border:1px solid blue;
overflow:hidden;
}
.card > div{
height:100%;
width:100%;
}
.card .foreground{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform:translateX(100%);
background-color:blue;
transition:.5s ease;
}
.card:hover .foreground{
transform:translateX(0);
}
<div class="card">
<div class="foreground"></div>
<div class="background"></div>
</div>
You can attach styles to a div by using the :hover keyword.
Example, you want to change some effect on the div on hover:
div:hover {
background-color: black;
}
You want to change some effect on a child, on parent hover
div:hover .child {
background-color: black;
}
EDIT
Ok, check the class changes when you force hover on their page, their original element has these styles:
z-index: 200;
content: "";
height: 263px;
width: 102px;
background-color: #91c6c2;
display: inline-block;
position: absolute;
top: 0px;
right: -50px;
-webkit-transform: skew(21deg);
transform: skew(21deg);
-webkit-backface-visibility: hidden;
-webkit-transition: right 0.5s;
transition: right 0.5s;
On hover, they just change the elements "right", to 80px, which makes it float in via the mentioned transition, "transition: right 0.5s".
you require a overlay effect on hover of a div.
Please refer this link
<div id="overlay">
<span id="plus">+</span>
</div>
CSS
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px;}
Found this in google search and also lots of plugins are avila
This may not be the most efficient way but it was most definitely the easiest that I've found. You can add the absolute position to the hidden div to make it on top of the image if you so choose!
HTML:
<div id='backgroundImg' onmouseover="hoverOver('show');" onmouseout="hoverOver('hide');">
<div id='hiddenDiv'>
</div>
<img src='myImage.png'>
</div>
Javascript:
<style>
function hoverOver(type) {
if (type=='show') {
document.getElementById('hiddenDiv').style.display='inherit';
} else {
document.getElementById('hiddenDiv').style.display='none';
}
}
</style>
I have a problem creating a transition in CSS3. I have a div block, that has an image shaped in circle with CSS, and underneath some text. I have managed to do that whenever I hover a block, circle and image resize, but I cannot manage to do what I want. I want to do it the way that only circle scales but image stays the same size. Can you please help me. I would be very grateful.
My HTML code
<div id="Vsebina">
<div class="storitve"><div class="okrogel"> <img src="Slike/night.jpg"></div></div>
<div class="storitve"> <div class="okrogel"><img src="Slike/night.jpg"></div></div>
<div class="storitve"> <div class="okrogel"><img src="Slike/night.jpg"></div></div>
</div>
Vsebina is used instead of section
storitve is a block
okrogel is a round div block that has image in it
And my CSS code looks like (I have used grey background for now just to see where they are standing)
.storitve {
width:30.3%;
margin:1.5%;
height:400px;
background:grey;
float:left;
}
.okrogel img {
max-height:100%;
border-radius:50%;
display:block;
position:relative;
}
.storitve:hover .okrogel{
transform:scale(1.25,1.25);
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function:ease-in-out !important;
}
.okrogel {
width:200px;
height:200px;
margin:0 auto;
margin-top:10px;
}
Add this to your css.
The hover is forcing the image to transform.
So force it to transform again to the original resolution using this:
.storitve:hover .okrogel img{
transform: scale(0.80, 0.80); !important;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function:ease-in-out !important;
}
You can tweak the 0.80 until you get the result you want.
.storitve {
width:30.3%;
margin:1.5%;
height:400px;
background:grey;
float:left;
}
.okrogel img {
max-height: 200px;
max-width: 200px;
border-radius:50%;
display:block;
position:relative;
}
.storitve:hover .okrogel{
transform:scale(1.25,1.25);
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function:ease-in-out !important;
}
.storitve:hover .okrogel img{
transform: scale(0.80, 0.80); !important;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function:ease-in-out !important;
}
.okrogel {
width:200px;
height:200px;
margin:0 auto;
margin-top:10px;
background: rgba(0,0,255, 0.7);
}
<div id="Vsebina">
<div class="storitve"><div class="okrogel"> <img src="http://www.freeiconspng.com/uploads/firefox-logo-icon-15.png"></div></div>
<div class="storitve"> <div class="okrogel"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Internet_Explorer_9_icon.svg/2000px-Internet_Explorer_9_icon.svg.png"></div></div>
<div class="storitve"> <div class="okrogel"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png"></div></div>
</div>
I'm working on a transition onmouse hover an div. The effect should be a text merging from the top to the middle of the div while the div turns from square to circle. The problem is that if in FireFox the square to circle effect works but not the text droping down from top, this effect only works on Chrome and IE. Does anyone encounter this before and can someone tell me why this is happening?
The code of my buttons are below:
#navigation{
font-size:14px;
float:left;
left:0;
height:100%;
position:static;
width:65px;
margin-top:6.5%;
margin-left:10%;
}
#tab1{
float:left;
width:65px;
height:65px;
left:0;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
margin-top:40px;
box-shadow: 1px 1px 2px #000;
}
.tab1h{
width:65px;
height:65px;
visibility:none;
position: absolute;
opacity: 0;
vertical-align: middle;
text-align:center;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
}
#tab1:hover {
border-radius:50%;
overflow:hidden;
visibility:none;
}
#tab1:hover > .tab1h {
visibility:visible;
float:left;
opacity:1;
padding-top:20px;
}
<div id="navigationi">
<a href="index.html" >
<div id="tab1" style="background-color:#f5f4f0; font-size:14px;">
<div class="tab1h">
Home
</div>
</div>
</a>
</div>
So here is my html and css also here is a JSFiddle http://jsfiddle.net/MFcS5/.
Thanks,Victor
Removing overflow:hidden from #tab1:hover solves the problem. Here's a fiddle showing it working as intended in Firefox (as well as Chrome and IE).
It could be caused by this bug: "CSS transitions don't start due to frame reconstruction of ancestor or self..."; changing the overflow causes #tab1 to be redrawn at the same time as the transition is supposed to start, so its child .tab1h doesn't get to transition.
What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!
***I'd prefer a pure CSS/HTML solution as I don't use javascript.***
What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.html and mouseover some of the links).
What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).
I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/ but would like to have the option of an image in the top left corner.
Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay.
The first two css classes are what you need in your code, rest is just for example.
http://jsfiddle.net/ctJ3d/8/
.popupBox {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
transition: all 0.4s ease;
transition-delay: 1s;
}
.popupHoverElement:hover > .popupBox {
visibility:visible;
opacity:1;
transition: all 0.3s ease;
transition-delay: 0s;
}
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
}
<div id="button" class="popupHoverElement">
<h3>hover</h3>
<div id="two" class="popupBox">Hovered content</div>
</div>
I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/
HTML:
<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>
CSS:
#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}
There is a tutorial called Sexy Tooltips with Just CSS that might be exactly what you're looking for. There are two things to watch for:
This solution requires that your tooltip be in your HTML markup, instead of reading from the title attribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the title attribute as the value of the content property for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltips and Stack Overflow: How to change the style of Title attribute inside the anchor tag?
If you are still providing support for older browsers, be aware the IE7 will not obey the :hover selector for anything but A tags. If you need the tooltips to appear in IE7 for any element but an A tag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.
<div id="one"><h3>hover over me</h3>
<div id="two">Hovered content</div>
</div>
#one {
background:#443322;
position:relative;
width:100px;
height:30px;
display:block;
color:#FFFFFF;
}
#two {
background:#223344;
position:absolute;
width:100px;
height:100px;
display:none;
color:#FFFFFF;
}
#one:hover #two {
display:block;
left:100px;
}
I have frame styles for the image:
.frame {
background:#efefef;
border:1px solid #f6f6f6;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* #todo Old Browsers Fix */
margin-bottom:15px;
padding:4px;
}
in one place of the project I work on, I have following HTML code:
<a href="#" class="preview">
<img class="frame" src="http://placehold.it/288x159" alt="" />
</a>
Basically, I want to change file opacity on mouseover and add a background (preview icon) to the link. I have following code:
.preview img.frame {
margin:0;
position:relative;
}
.preview:hover {
background:url('../img/icon_zoom.png') center center no-repeat;
display:inline-block;
z-index:40;
}
.preview img { /* #todo Add different browsers rules */
opacity: 1;
/*moz-transition-property:opacity;
-moz-transition-timing-function:ease-out;
-moz-transition-duration:500ms;*/
-moz-transition:opacity 1s ease-in-out;
}
.preview:hover img {
opacity:.5;
-moz-transition:opacity 1s ease-in-out;
/*-moz-transition-property:opacity;
-moz-transition-duration:500ms;
-moz-transition-timing-function:ease-out;*/
display:block;
position:relative;
z-index:-1;
}
However I faced few issues:
- how can I show background only for image body (currently it's also being displayed on the border)?
- why opacity is not being changed in Chrome?
jsFiddle added. As you may see, it works in FF, but not in Chrome.
The problem appears to be that you're changing the display to inline-block. Take it out, it should have the same functionality and work just fine.
Changing a couple other things seems to have it working as you intended. http://jsfiddle.net/minitech/v2vtw/2/