3 replies [Last post]
Gitika
Gitika's picture
Offline
newbie
Last seen: 5 years 22 weeks ago
Timezone: GMT+5.5
Joined: 2015-02-23
Posts: 3
Points: 4

Hi there,
I have 7 images of width 50px and given a transition of width to them, as i hover on them , the images open to the width of 500px. The first option is that I want only one image to be opened on the load of my webpage and when I hover over any other image , the opened image should get back to the original size (i.e. width = 50px). For this, which css property should I use? And for the second option,I want that the last image in the row (i.e. the right foremost image) should open or transition to left side, not to the right side as all images are opening to the right side(means from left to right). I want the solution for any one of my options and if both are possible, that will be very grateful.
Thanks beforehand, as I hope to get your precious help which will be much appreciated and admired .
Thanks'
Gitika.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 34 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Source?

It would be helpful if you would show us your existing markup and css. Post a minimal test case or a link to a test page.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Gitika
Gitika's picture
Offline
newbie
Last seen: 5 years 22 weeks ago
Timezone: GMT+5.5
Joined: 2015-02-23
Posts: 3
Points: 4

Keep one image opened by default

This is html:

This is css:
#container {
margin-top: 40px;
width: 100%;
height: 340px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 0;
background: black;
position: relative;
}
#slideright { position:absolute; margin-left: 240px;}
#slideright li {
list-style-type: none;
margin: 3px;
}

#slideright a#pho1 { background-image: url(img/pinktulip.jpg);}
#slideright a#pho2 { background-image: url(img/berries.jpg);}
#slideright a#pho3 { background-image: url(img/gate.jpg);}
#slideright a#pho4 { background-image: url(img/cherries.jpg);}
#slideright a#pho5 { background-image: url(img/clouds.jpg);}
#slideright a#pho6 { background-image: url(img/fog.jpg);}
#slideright a#pho7 { background-image: url(img/leaves.jpg);}

#slideright li {
float: left;
}
#slideright li a{
display: block;
width: 80px;
height: 336px;
border: 2px solid #eee;
border-radius: 8px;
padding: 4px;
background-repeat: no-repeat;
box-sizing: border-box;
text-decoration: none;
box-shadow: -2px -2px 6px #000;
color: #eee;

-webkit-transition: width .8s ease-out;
position: relative;
}

#slideright a em {
position: absolute;
top: 4px;
left: 4px;
z-index: -1;
}

#slideright a:hover em {

z-index: 1;
-webkit-transition: z-index 800ms ease-in .4s;
}

a#pho1:hover, a#pho2:hover, a#pho3:hover, a#pho4:hover, a#pho5:hover, a#pho6:hover, a#pho7:hover,{
width: 500px;
border: 2px solid #F95997;
}

I hope this to be helpful for the solution...Actually I want all these 7 images to be in center of the page and if I do so the last image on hover goes out of the page. The second thing is, if one image is to be opened on the load of the page and then closes on the hover of another image, it will be centered automatically, because one image is always opened at all times. I hope I explained properly...
Regards,
Gitika

Gitika
Gitika's picture
Offline
newbie
Last seen: 5 years 22 weeks ago
Timezone: GMT+5.5
Joined: 2015-02-23
Posts: 3
Points: 4

Keep one image opened by default

This is html:

<ul id="slideright">
  <li><a href="#" id="pho1"><em>pink tulip</em></a></li>
  <li><a href="#" id="pho2"><em>berries</em></a></li>
  <li><a href="#" id="pho3"><em>gate</em></a></li>
  <li><a href="#" id="pho4"><em>cherries</em></a></li>
  <li><a href="#" id="pho5"><em>clouds</em></a></li>
  <li><a href="#" id="pho6"><em>fog</em></a></li>
  <li><a href="#" id="pho7"><em>leaves</em></a></li>
 
</ul>	

This is css:

#slideright { position:absolute; margin-left: 240px;}
#slideright li {
list-style-type: none;
margin: 3px;
}
#slideright a#pho1 { background-image: url(img/pinktulip.jpg);}
#slideright a#pho2 { background-image: url(img/berries.jpg);}
#slideright a#pho3 { background-image: url(img/gate.jpg);}
#slideright a#pho4 { background-image: url(img/cherries.jpg);}
#slideright a#pho5 { background-image: url(img/clouds.jpg);}
#slideright a#pho6 { background-image: url(img/fog.jpg);}
#slideright a#pho7 { background-image: url(img/leaves.jpg);}
#slideright li {
float: left;
}
#slideright li a{
display: block;
width: 80px;
height: 336px;
border: 2px solid #eee;
border-radius: 8px;
padding: 4px;
background-repeat: no-repeat;
box-sizing: border-box;
text-decoration: none;
box-shadow: -2px -2px 6px #000;
color: #eee;
-webkit-transition: width .8s ease-out;
position: relative;
}
#slideright a em {
position: absolute;
top: 4px;
left: 4px;
z-index: -1;
}
#slideright a:hover em {
z-index: 1;
-webkit-transition: z-index 800ms ease-in .4s;
}
a#pho1:hover, a#pho2:hover, a#pho3:hover, a#pho4:hover, a#pho5:hover, a#pho6:hover, a#pho7:hover,{
width: 500px;
border: 2px solid #F95997;
}

I hope this to be helpful for the solution...Actually I want all these 7 images to be in center of the page and if I do so the last image on hover goes out of the page. The second thing is, if one image is to be opened on the load of the page and then closes on the hover of another image, it will be centered automatically, because one image is always opened at all times. I hope I explained properly...
Regards,
Gitika

[Tony: added code tags]