I'm still going at my portfolio site and struggling to get minor details correct.
I've got the 9x9 responsive thumbnail images working, with a brightness change on hover, however, now I need to add in the title of each thumbnail selection.
I need the text to appear only on hover, and then be in the centre of each image (each text will be unique to the thumbnail, which is why some of my code looks unnecessarily long).
That is the goal of this gallery, but for now, I really am just trying to figure out how to get the text to move into the centre of each gallery image.
Failing this, I think I may try this with the image set as a background to each div, seems as though it's easier to align the text this way.
.thumb_title{
position: absolute;
color: #FFFFFF;
}
span{
text-align: center;
}
Above, I tried to use absolute positioning to take the text out of normal flow and then centre it to the div, although I'm pretty sure my css principles are incorrect here.
https://jsfiddle.net/205dmxdw/
This should do the it:
.imgContainer {
position: relative;
float: left;
width: 33.3%;
margin: 0px;
text-align: center;
}
.thumb_title {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
}
Related
I am looking for a design like the following screenshot for the section heading. ( The bottom line)
So far I could achieve
h1 {
position: relative;
text-align: center;
width: 100%;
}
h1:after {
content: '';
position: absolute;
width: 100px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
bottom: 0;
border-bottom: 3px solid #8d8f90;
}
<h1 style="text-transform: none">How it works</h1>
Now I want the both end of the border-bottom to be shaped.
Example of using responsive background-image as requested in comments!
So im assuming that the border image will need to be that same length as the text, here is a working example:
div {
text-align: center;
}
h1 {
display: inline-block;
background-image: url(https://ded7t1cra1lh5.cloudfront.net/media/76045/a7fdf291661d9baab9b767d833c70183ba6ee3ce/original/divider-37709_1280.png?1448468523);
height: 120px;
background-repeat: no-repeat;
background-position: center;
background-size: cover/*contain*/
;
}
<div>
<h1 id="_1">I am a header</h1>
</div>
<div>
<h1 id="_2">I am a really really really really long header</h1>
</div>
So in this i grabbed a pretty large image from google as an example so it wouldnt be stretched at larger screen sizes. You will need to use #media screen command to alter the height of the header tag when the text breaks. However this will only be needed on longer headers, and if the header border needs to be the same length as the text. If it doesnt you can use a much shorter image and possibly change the size from cover to contain. The inline block makes it so the background image will always be the length of the text as well.
If you do decide to go this route some minor tweaking to the css should yield you acceptable results. Hope this is helpful as a back up solution Ramesh!
I have a page that has an image which contains text in it. There is a text outside of the image that needs to be right-aligned with the text within the image. I've tried handling this with percentages which worked for some sizes, but not for all.
Trying to figure out if there is an easy way to do this that works for all and for responsive layout too.
Example:
How's this for you? https://jsfiddle.net/n451c4ym/2/ the "bottom" css property would need to be adjusted - but with that setup the right hand side of the text remains inline with the fixed text on the image...
Basically you give the parent a position of relative:
.imageContainer{
position: relative;
width: 100%;
}
and make the text a child of that container (along with the image). Then by making your html text width 100%, it should scale at the same proportions as the image (and in turn the fixed image text):
.imageContainer img{
width: 100%;
}
.text{
color: #fff;
display: block;
position: absolute;
bottom: 50%;
padding-right: 7vw;
right: 0;
text-align: right;
width: 100%;
}
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.
The above image is what I am trying to get at.
I've tried keeping the width:auto but it's not working either.
body
{overflow-x:hidden;}
div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}
a
{position:relative;white-space:nowrap;}
a > span.tooltip
{
position: absolute;
white-space: normal;
width: 100%;
top: 130%;
left: 0;
}
a > span.tooltip > span
{
position: absolute;
top: 0;
right: 0;
text-align: center;
bottom: 0;
left: -500%;
width: 1100%;
}
a > span.tooltip > span > span
{
display: inline-block;
background: black;
border-radius: 4px;
padding: 10px;
color: white;
max-width: 300px;
}
DEMO:
http://jsfiddle.net/b2Yqf/
works on msie 7 8 9 10, firefox, chrome
not what you might want... since markup is made with three nested <span>s... but YES. it could be done!
The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by #robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.
EDIT1:
Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.
I don't think what you are trying to do (center the tooltip) is possible while having width:auto;.
If you declare a width, you can simple position the tooltip with:
.tooltip:hover:after {
width:100px; /* whatever you want */
left:50%;
margin-left:-50px; /* half the width */
}
EDIT
As #Alexander says in his answer, also repositioning your tooltip arrow using margin-left is a good idea, as it is slightly off center with just left:50%.
Using a CSS image sprite, I'm creating an 'interactive' image where hovering over certain areas changes part of the image. All works fine but struggling with being able to control the area of the hover once you are over the hover area.
For example, lets say the main area is 400x400 pixels and the hover area is 100x100 from the top left corner. As you move into the hover area, the 'new' image to display is 200x200. This appears but then this 'new' 200x200 image becomes active; I can then move anywhere within this new image (to say 150x150) and the hover image is still there even though now I am out of the 100x100 original hover area. Is there any way to restrain this so that the active area is always 100x100 even with the 200x200 hovered image displayed?
My (cut-down) CSS (areaTest.css) is:
#bigArea {
width: 400px;
height: 400px;
background: url(areaImage.jpg) no-repeat;
margin: 10px auto; padding: 0;
position: relative;
}
#bigArea li {
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#bigArea a {
display: block;
text-indent: -9999px;
text-decoration: none;
}
#littleArea {
width: 100px;
height: 100px;
}
#littleArea a {
width: 100px;
height: 100px;
}
#littleArea a:hover {
width: 200px;
height: 200px;
background: url(areaImage.jpg) 0px -410px no-repeat;
}
and my HTML is:
<link href="areaTest.css" rel="stylesheet" type="text/css">
<div>
<ul id="bigArea">
<li id="littleArea"></li>
</ul>
</div>
Any help would be much appreciated.
Thanks, Jam
I forked Kyomu's solution and applied the opposite: http://jsfiddle.net/FEkcx/
The <a> is an empty block that is on top of a <div> that actually has the background image. The hover is triggered using #littleArea a:hover + div.
Well, I have a solution. "Cover up" the part you don't want it to trigger on (ex: with empty divs). By doing this it will no longer be hover over the object.
Example
I think there might be a better way using selectors (like +), but this works.