Positioning images on a page (HTML)
Question
These images are using a CSS code for hovering effects, everything works good except i have no idea how to re arrange their position on the page.
Right now they are horizontally on top of each other, how can i make them side by side?:
body { color:#000000; background-color:#000000; background-image:url('Background Image'); background-repeat:no-repeat; } a { color:#0000FF; } a:visited { color:#800080; } a:hover { color:#008000; } a:active { color:#FF0000; } #cf { position:relative; height:281px; width:450px; margin:0 auto; } #cf img { position:absolute; left:0; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } #cf img.top:hover { opacity:0; }
<a href="http://example.com/page1"> <div id="cf"> <img class="bottom" src="images/img_a_1.jpg" /> <img class="top" src="images/img_a_2.jpg" /> </div></a> <a href="http://example.com/page2"> <div id="cf"> <img class="bottom" src="images/img_b_1.jpg" /> <img class="top" src="images/img_b_2.jpg" /> </div></a> <a href="http://example.com/page3"> <div id="cf"> <img class="bottom" src="images/img_c_1.jpg" /> <img class="top" src="images/img_c_2.jpg" /> </div></a>
2 answers
solution1
1 ACCPTED 2016-11-03 09:37:36
As arhak has previously commented, we do not use an id more than once on a page, they must be unique. Here are the following changes:
-
Changed each
#cfto class.cf. -
Added
display:table-cellto each.cfso that they are side-by-side. Changed each
.cfdimensions to something manageable 50 x 50px.Replaced non-functioning
<img>srcto working values*.Decreased the size of each
.cfto 50 x 50px*.
All of these changes are optional with the exception of the first and second changes.
*I know that your relative urls work for you, but an example that doesn't work here will make things harder to demonstrate. In the future if you have images, use those or images of equivalent size in your examples. If we don't know that 50 x 50px is insufficient for your requirements, that will slowdown the process in finding a resolution.
SNIPPET
body { color: #fff; background-color: #000000; background-image: url('Background Image'); background-repeat: no-repeat; } a { color: #0000FF; } a:visited { color: #800080; } a:hover { color: #008000; } a:active { color: #FF0000; } .cf { position: relative; height: 50px; width: 50px; margin: 0 auto; display:table-cell; } .cf img { position: absolute; left: 0; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .cf img.top:hover { opacity: 0; }
<body> <a href="http://example.com/page1"> <div class="cf"> <img class="bottom" src='http://placehold.it/50x50/00f/fff?text=1'> <img class="top" src='http://placehold.it/50x50/cf0/000?text=2'> </div> </a> <a href="http://example.com/page2"> <div class="cf"> <img class="bottom" src='http://placehold.it/50x50/0e0/110?text=3'> <img class="top" src='http://placehold.it/50x50/0bb/011?text=4'> </div> </a> <a href="http://example.com/page3"> <div class="cf"> <img class="bottom" src='http://placehold.it/50x50/fff/000?text=5'> <img class='top' src='http://placehold.it/50x50/f00/fff?text=6'> </div> </a> </body>
solution2
0 2016-11-03 08:50:15
body { color:#000000; background-color:#000000; background-image:url('Background Image'); background-repeat:no-repeat; } a { color:#0000FF; } a:visited { color:#800080; } a:hover { color:#008000; } a:active { color:#FF0000; } #cf img { text-align: center; } #cf img.top:hover { opacity:0; }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <body> <a href="http://example.com/page1"> <div class="col-xs-12 form-group" id="cf"> <img class="bottom col-xs-6" src="images/img_a_1.jpg" /> <img class="top col-xs-6" src="images/img_a_2.jpg" /> </div></a> <a href="http://example.com/page2"> <div class="col-xs-12 form-group" id="cf"> <img class="bottom col-xs-6" src="images/img_b_1.jpg" /> <img class="top col-xs-6" src="images/img_b_2.jpg" /> </div></a> <a href="http://example.com/page3"> <div class="col-xs-12 form-group" id="cf"> <img class="bottom col-xs-6" src="images/img_c_1.jpg" /> <img class="top col-xs-6" src="images/img_c_2.jpg" /> </div></a> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.