I'm creating simple photo gallery (php) for a responsive site and when a photo is displayed I want to have overlay with navigation displayed on mouse hover (for desktop, taking another approach for mobile). The overlay (over photo) is supposed to be div of same width as the given photo (variable width), left navigation is 25% of left part and right one 25% on the right. When photo is displayed and mouse cursor is outside of photo nothing is visible. When mouse cursor hovers over left part big < is displayed. And > for right side. < and > should be vertically centered.
I got it working but only with absolute positioning, declaring exact position but the result is not responsive and breaks when windows is smaller:
jsfiddle.net/mwf5618r/
I tried using flex and z-index too but did not get it to work. Below is what I created with flex but does not work. I don't need to use flex as long as it is responsive.
jsfiddle.net/x1jexvb0/
Will you help me to make it cleanly and responsive? Many thanks.
I changed some HTML elements included the CSS, hopefully this will done the work for you. Check also the new Fiddle: http://jsfiddle.net/mwf5618r/1/embed/
HTML:
<div style="position: relative;">
<a href="#left" class="photo_nav left">
<div id="photo_nav">
<
</div>
</a>
<a href="#right" class="photo_nav right">
<div id="photo_nav">
>
</div>
</a>
<div style="margin:0;padding:0;width:100%;margin:auto;">
<img src="http://3.bp.blogspot.com/_w0r3cYUSD7A/Sob415afOVI/AAAAAAAABa4/-J_vkiTkITE/s1600/sunflare.jpgg" class="photo" style="width:100%;">
</div>
</div>
CSS:
a.photo_nav {
position: absolute;
width: 25%;
height:100%;
padding: 0;
margin: 0;
opacity:0;
font-size: 200px;
text-decoration:none;
background:none;
transition: 0.3s;
}
a.photo_nav:hover {
color:#fff;
opacity:0.6;
}
a.photo_nav #photo_nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
a.photo_nav.left {left: 0;}
a.photo_nav.right {right: 0;}
a.photo_nav.left div#photo_nav {left: 0;}
a.photo_nav.right div#photo_nav {right: 0;}
Well maybe this?
Related
<div class="container">
<div class="fullscreen">
<div class="textbox">Testing</div>
</div>
</div>
I'm trying to have an image fully show up based on the size of a screen, and to have text ("Testing" in the textbox class) show up in a precise designated area in the image, as shown above.
Trying to get the above to work with this codepen, but I am defeated to admit that after an hour of fiddling with css, I am nowhere close.
It is pretty frustrating that css doesn't seem to work as expected, where the image doesn't seem to want to nest to full height etc.
I would like to suggest if you add image using img HTML tag you have better control on image in relation with "Testing" text. Please check below my snippet. You can adjust position of "Testing" by "top" position on ".textbox" class :
.container{
min-height: 100%;
margin: 0;
padding: 0;
}
.fullscreen{
width: auto;
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
.textbox{
position:absolute;
top:55%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index:3;
text-align:center;
}
<div class="container">
<div class="fullscreen">
<img src="http://print.drawmaticar.com/preview.jpg" style="width:100%;"/>
<div class="textbox">Testing</div>
</div>
</div>
Try this:
background: url('path/to/img.jpg') no-repeat center center / cover;
Normally, if you call the image in background means need to add the padding-bottom in percentage.. It means the image height/width*100
css
.fullscreen {
padding-bottom: 129.411%;
}
Backgorund Image
you have to make background-size:cover instead of 100% and make height:100vh to make it visible.
I am trying to get an oversized image to horizontally stay centered within a list element. When scaling the window down, you'll see that right side of the image becomes hidden. This is what's meant to happen, but I want the original image to stay centered thus becoming hidden left and right side. Can anyone help please?
FIDDLE HERE
#photo-container{
list-style-type: none;
width:100%;
overflow:hidden;
text-align: center;
}
.photo{
width:100vw;
min-width:600px
}
<div>
<ul>
<li id="photo-container">
<img class="photo" src="https://brianrashid.com/wp-content/uploads/2015/09/NYC-FORBES-1940x970.jpg">
</li>
</ul>
</div>
You can try using position + transform tricks.
.photo {
...
position: relative;
left: 50%;
transform: translateX(-50%);
}
jsFiddle
Here I am working within the edit the CSS of a wordpress plugin. The purpose of the plugin is to add a fixed position box at the top of the website where the user can read and click on a link as you scroll the site.
The issues that I am having is that I want the box to match the main sites "dark blue" band's height. Changing the CSS and using like height: 80%; isn't quite working here.
I also wanted to center the light blue box to the center ( I am also going to change the width of it to just fit the content that it holds).
This is my first time applying CSS, so I'm not sure what I'm doing here. I am not able to edit the code directly, just put in CSS "options".
My code is:
<div id="topbar" style="position:fixed; top: 20; padding:0; margin:0; width: 50%; z-index: 99999;opacity:.7; height:80%;" >
<div id="wptbheadline1" style="background-repeat: no-repeat; vertical-align:middle; family:georgia; padding-right:10px; padding-left:10px;" >Check out our Twitter
<a style="" HTML Option B</a>
</div>
</div>
I think this is what you're looking to achieve; See below.
#topbar {background: orange;color:#fff;} /* ignore this css */
<div id="topbar" style="position:fixed; top: 20; padding:7px 0; margin:0; width: 50%; z-index: 99999;opacity:.7; transform: translateX(50%); text-align: center" >
<div id="wptbheadline1" style="background-repeat: no-repeat; vertical-align:middle; family:georgia; padding-right:10px; padding-left:10px;" >Check out our Twitter
<a style="" HTML Option B</a>
</div>
</div>
Adjust the padding :7px 0; to fit the height.
I'm building a strange div shaped structure and I need a hint to resolve a clicking problem.
This is a jsfiddle to show you the issue.
The structure for each element is:
<div class="views-row">
<div class="diamonds-container">
CONTENT
</div>
</div>
I have a onclick() event on .diamonds-container but the .views-row div of the next element [with red or blue background..] go over the container and stop the click event on it.
I tryed to play with the z-index but I didn't have the expected result.
How can I achieve this structure with a correct click event on diamonds-containers ?
I think I can track the .views-row click with javascript and trigger manually a click on the previous diamonds-container but this will be my final option.
How can I achieve this without javascript?
UPDATE:
I have to position my diamonds like this
so I can't use the #matewka code because I will have the overlaping vertically instead of orizzontally..
There is more than one route for this kind of problem.
If you use the rotation transform anyway, why not rotate the .views-row element to get the bounding box out of the way?
For recent browsers and IE11 there are pointer events. See this updated fiddle.
.views-row {
z-index: 1;
pointer-events: none;
}
.diamonds-container {
z-index: 9;
pointer-events: auto;
}
Here is my approach. I'm not sure if nesting two divs inside each other was for rotating purpose or had some other meaning. Anyway, I did it this way:
.views-row {
width: 130px;
height: 130px;
-webkit-transform: rotate(45deg);
}
.views-row-first {
-webkit-transform-origin: 195px center;
}
.views-row-even {
-webkit-transform-origin: center center;
}
.views-row-odd {
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: -65px center;
}
Each .views-row is rotated and the transform origins are all pointed to the center of the middle div. Notice that the transform-origin values are multiplicities of the half of the width (130px / 2).
See the updated FIDDLE for the complete CSS. I also added a :hover property for .diamonds-container so you can see that they're all clickable.
UPDATE
With the picture you added the problem became much more complicated. But I figured it out.
Hint: If you can't wait for the fiddle - you'll find it at the bottom of the answer.
The idea:
Square boxes are nested twice. Each 2 .diamond boxes are wrapped with the .pair-wrapper div. That div is rotated 45deg and it is repeated few times along its container. Each even .pair-wrapper has increased width to position its right-hand neighbour properly.
A bunch of .pair-wrappers are wrapped with the .line-wrapper. You can add as much .line-wrappers and .pair-wrapper as you want (remember - .pair-wrappers will break into the new line if they don't fit).
Finally, each .line-wrapper has fixed height and hidden overflow to restrict its children area from the top and the bottom. Each .pair-wrapper is positioned relatively and has negative top value.
The solution is based mostly on fixed values, both I could figure out a better idea.
The code
Example HTML markup looks like this:
<div class="line-wrapper line-wrapper-odd">
<div class="pair-wrapper pair-wrapper-odd">
<div class="diamond-box"></div>
<div class="diamond-box"></div>
</div>
<div class="pair-wrapper pair-wrapper-even">
<div class="diamond-box"></div>
<div class="diamond-box"></div>
</div>
<div class="pair-wrapper pair-wrapper-odd">
<div class="diamond-box"></div>
<div class="diamond-box"></div>
</div>
</div>
<div class="line-wrapper line-wrapper-even">
<div class="pair-wrapper pair-wrapper-odd">
<div class="diamond-box"></div>
<div class="diamond-box"></div>
</div>
.....
</div>
.....
And the most important parts from CSS (complete CSS in the fiddle):
.line-wrapper {
height: 170px;
overflow: hidden;
}
.line-wrapper-even {
margin-left: -92px;
}
.pair-wrapper {
width: 130px;
position: relative;
top: -26px;
-webkit-transform: rotate(45deg);
}
.pair-wrapper-odd {
-webkit-transform-origin: 65px 65px;
}
.pair-wrapper-even {
-webkit-transform-origin: 92px 131px;
width: 239px;
}
.diamond-box {
width: 130px;
height: 130px;
}
The fiddle
http://jsfiddle.net/N3V6J/3/
I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3
box - the popped out div with lightbox effect
address_box - the div inside the box which is nothing but an outline image
address - i want this div to be imposed upon the address_box image
HTML:
<div class="box">
<div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div>
<div id="address_box"><img src="img/address-box.png" />
<div id="address">The address text
</div>
</div>
CSS:
.box
{
position:absolute;
top:20%;
left:12%;
text-align:center;
width:940px;
height:321px;
background:#F9E5B9;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:none;
}
.box #move_in_img{
float:left;
margin-left:20px;
margin-top:50px;
}
#address_box{
position:relative;
}
#address{
position:absolute;
}
the "box" properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.
What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??
Here is the paste bin link http://jsbin.com/anehey/1/edit
Just picked a sample image from net for the frame. I want the text to go inside the frame..
Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text div
HTML
<div class="container">
<img src="#" />
<div class="text"></div>
</div>
CSS
.container {
position: relative;
/*Set Height Width Accordingly*/
}
.text {
position: absolute;
bottom: 0;
height: /*Whatever*/;
width: 100%;
}
Demo (Not related to my answer but I fixed what he was asking for)