I'm fairly new to the CSS/HTML world. I am creating an interactive image using html hotspots, CSS and bootstrap to create modal information about certain parts of the image. The image is very wide (its a process road map) and will be used on a large touch screen for a presentation only. The issue I am having is that when the bootstrap modal is opened it appears at the zoom level of the browser. Since this is a very large image and the user can zoom in and out I need to make the data on the modal appear static in size/zoom. I have used viewpoints to keep the size of the text static and this works well for 100+ - 60% zoom. What does not work well is when I zoom far out the text overlaps itself, 50% or less which is possible if people want to see the whole image before clicking the link to open the modal. The layout on the modal is two rows of three columns using bootstrap. The columns do not overlap its that the text wraps over itself. I'm not sure how to fix this problem or perhaps another approach is better all together.
I have played with changing the size of the image which helps some, but at some point varying zooms will be used no matter what image size I use thus the problem occurs.
What it is doing at 45% zoom, text size is OK but its overlapping:
What I need it to look like at any zoom:
CSS for modal content:
/**** Start details Model Content Section ****/
.details, .details-2 {
padding-bottom: 80px;
}
.details {
text-align: center;
min-height: 100px;
}
.details h4{
font-size: 2.5vmin;
color: #666;
font-weight: 300;
font-family: 'Oswald', sans-serif;
}
.details-2 h4{
font-size: 2.5vmin;
color: #444;
padding-bottom: 10px;
font-weight: 300;
font-family: 'Oswald', sans-serif;
}
.details p, .details-2 p {
color: #444;
font-size: 2vmin;
line-height: 20px;
font-weight: 300;
}
.details i {
font-size:3.5em;
color:#fff;
background: #FF432E;
width: 100px;
height: 100px;
padding:25px;
margin-bottom: 10px;
-webkit-border-radius:70%;
-moz-border-radius:70%;
-o-border-radius:70%;
border-radius:70%;
position: relative;
box-shadow: 0 0 0 30px transparent;
-webkit-transform: translate3d(2, 2, 2);
-moz-transform: translate3d(2, 2, 2);
-o-transform: translate3d(2, 2, 2);
transform: translate3d(2, 2, 2);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
}
.no-touch .details:hover i,
.no-touch .details:active i,
.no-touch .details:focus i {
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
box-shadow: 0 0 0 0 #FF432E;
}
.details-2 i {
color:#FF432E;
font-size:3em;
padding:1px 10px 0 1px;
position: relative;
}
.container {
width: 96%;
height: 96%;
}
/**** End details Modal Content Section ****/
<meta name="viewport" content="width=device-width, initial-scale=1"> should help on mobile scaling problems.
Place between the <head> and </head>
Related
I'll get straight to the point. What I want to do is to create simple text, such as: © 2017, that will change (on hover) to developed by Jonathan Doe. I want activation field to be smaller than the deactivation field but the problem is that hitbox for the © 2017 is the size of hidden element.
I was looking for the solution on the internet for quite some time but everything that I found, was button with not flexible width. Maybe I need to use some sort of tooltip, that will cover passive state? I am not sure.
I want this element to float in the bottom left cornet of the site, that's why I set position to fixed.
The other problem is that when text developed by Jonathan Doe is active, deactivation field is bigger on top than it should be. It looks like elements with 0 opacity are messing up my hitboxes. I was trying to play with display: none;, but then animation is not playing.
I started to code literally yesterday, so please forgive me for all the noob mistakes. I am trying to understand the logic behind all of this.
I've added the piece of code, I hope I did it right.
.con {
position: fixed;
font-weight: normal;
color: #000000;
font-family: 'Roboto', sans-serif;
z-index: 99;
}
/* © 2017 */
.con.copyright:before {
position: fixed;
padding: 9px 16px 7px 16px;
bottom: 16px;
left: 16px;
font-size: 14px;
line-height: 26px;
text-align: left;
content: '© 2017';
opacity: 1;
transition: all 0.3s cubic-bezier(.64, 0, .36, 1);
}
.con.copyright:hover:before {
opacity: 0;
bottom: 32px;
}
.con.copyright:after {
position: fixed;
padding: 9px 16px 7px 16px;
bottom: 0px;
left: 16px;
font-size: 14px;
line-height: 26px;
text-align: left;
content: 'developed by Jonathan Doe';
opacity: 0;
transition: all 0.3s cubic-bezier(.64, 0, .36, 1);
}
.con.copyright:hover:after {
opacity: 1;
bottom: 16px;
}
<div class="con copyright"></div>
I do not like how you can keep developed by Jonathan Doe text active by quickly moving your mouse over it.
It took me few additional days but I think I've finally did this. Hitboxes are perfect. The only one problem now is that for some unknown reason, text is not antialiased. I was playing with some values but nothing helped.
EDIT: I've came out with better version. Less messy and with working antyaliasing.
Here is the new version - maybe some beginner like myself will find this useful. I will update it if I discover anything new:
EDIT: I've: • added transition-delay and reversed it so that effect is properly played on "mouseout"
EDIT: I've: • replaced visibility: hidden; with pointer-events: none; because with greater transform: translateY values "mouseout" was glitchy • split transition: all to transition: transform, opacity and removed transition-delay to get better control over delays
EDIT: Minor adjustments for better UX
* {
box-sizing: border-box;
}
/* copyright */
.copyright {
position: fixed;
color: #000000;
font-family: 'Roboto', sans-serif;
font-size: 14px;
left: 16px;
top: 16px;
text-align: left;
width: 78px;
height: 42px;
z-index: 10;
}
.copyright:before {
pointer-events: none;
position: absolute;
display: block;
top: 13px;
left: 16px;
opacity: 1;
content: '© 2017';
transform: translateY(0px);
transition: transform .24s 0s ease, opacity .16s .08s ease;
}
.copyright:hover:before {
transform: translateY(-24px);
transition: transform .24s 0s ease, opacity .16s 0s ease;
opacity: 0;
}
.copyright_ch {
position: absolute;
opacity: 0;
padding: 13px 0px 0px 16px;
top: 0px;
left: 0px;
pointer-events: none;
width: 205px;
transition: transform .24s 0s ease, opacity .16s 0s ease;
height: 100%;
transform: translateY(24px);
}
.copyright:hover .copyright_ch {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
transition: transform .24s 0s ease, opacity .16s .08s ease
}
<div class="copyright"><div class="copyright_ch">developed by Jonathan Doe</div></div>
note: This is not really a flexible solution. If you would like to change inscriptions, font size, hitboxes etc., you will have to change and adjust values manually. To get a good look at current hitboxes add background-color: #cccccc; to .copyright and .copyright_ch classes. You might also want to play with opacity: 0/1 so that you can see what you are working with.
Website: http://uniformserver.com
The bottom footer is not formatting accordingly. It should be at the end but when the site loads, it comes up the the image size.
http://imgur.com/XoqVqdg
Should look like this:
http://imgur.com/zQNlIWn
If you navigate to another page, it corrects itself.
Footer CSS
footer {
clear: both;
padding-top: 40px;
text-align: center;
cursor: default;
padding-bottom: 0px;
margin:0px auto;
}
footer p {
color: #c1c1c1;
font-size: 11px;
padding: 4px 8px 4px 8px;
background: #f7f7f7;
background: rgba(0,0,0,0.04);
display: inline;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition:color 0.2s ease-in, background 0.2s ease-in;
-moz-transition:color 0.2s ease-in, background 0.2s ease-in;
-o-transition:color 0.2s ease-in, background 0.2s ease-in;
transition:color 0.2s ease-in, background 0.2s ease-in;
}
footer p:hover {
background: #f1f1f1;
background: rgba(0,0,0,0.05);
color: #999;
}
Your footer has some padding at the bottom. If you reduce it, it will get closer to the bottom of the page.
footer.container { padding-bottom: 0; } would be a footer that touches the bottom completely, and footer.container { padding-bottom: 15px; } is probably close to what you're looking for.
However, because your page doesn't have a lot of content on it, your footer will appear higher when there just isn't enough content on the page to fill the full viewport.
A quick trick to experiment with this is zooming in and out on your browser. You can use the ctrl or cmd + +/- shortcuts.
Here's the page upon which I'm working.
I'm using Shortcodes Ultimate to get the columns, and it's responsive. Now I'm trying to get a text hover with background over the images, preferably without JS for now. I can get it to hover perfectly if it's given defined height and width, but then that's not responsive.
On CodePen, it shows the title going all the way across the page, but the Shortcodes Ultimate columns eliminate that. But it probably isn't best design, either.
I've followed about 20 different tutorials to get where I am, but am stuck now.
CodePen
HTML:
<div id="portfolio_hover_wrapper">
<a href="#" class="wistia-popover">
<img src="https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360" alt="" class="hover" />
<span class="portfolio-hover-text"><span>ADO Rowing</span>
</a>
</div>
CSS:
#portfolio_hover_wrapper {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#portfolio_hover_wrapper a {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: table;
font-size: 3em;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#portfolio_hover_wrapper a:hover span.portfolio-hover-text {
opacity: 1;
}
span.portfolio-hover-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
If I understand what you want try using top: 50%; transform: translateY(-50%); in .portfolio-hover-text.
My bad I misunderstood your question, try adding the following:
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: block;
font-size: 3em;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.portfolio-hover-text span{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
white-space: nowrap;
}
In order to overlay text over an image I like to set the parent DIV to have the image as a background and child the text to it like such
<div class="box image1">
<div class="overlay fade">
<span class="text">ADO Rowing</span>
</div>
</div>
CSS
.box {
width: 75%; /*To make it responsive*/
height: 40em;/*Height should be fixed*/
box-shadow: inset 0px 2px 7px 0 rgba(0, 0, 0, .6);/*just for looks*/
margin: 5% auto 0 auto; /*Centers the div*/
border-radius: 5px; /*just for looks*/
overflow: hidden; /*Needed if our text overflows*/
}
.image1 {
background: url(https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360);/*Image*/
background-size: cover;/*Makes the background look responsive*/
background-position:center;/*for looks*/
}
Now we need to style the overlay. More CSS
.overlay {
background: rgba(33, 150, 243, .6);/*Overlay color*/
text-align: center;
padding: 1em 0 1em 0;/*adjust this if you want it cover the entire img*/
height:25%;/*Change this to 100% for whole image*/
opacity: 0;
margin: 25% 0 0 0;/*Moves the banner down*/
box-shadow: 0 2px 7px rgba(33, 150, 243, .4);
}
.text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
}
Padding will increase the div size and thus increase the color size, while margin will just space the div out without changing the size of the background, so I use margin to position and padding for sizing.
lastly we need to make some snappy animation on :hover
.fade {
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.box:hover .fade {
opacity:1;
}
That will change the opacity from 0 to 1 on hover with a .25s tranisition. That should be about it, hope that helps. View the CodePen Here
I am trying to recreate an effect I saw on "TheButton" subreddit. You can see that next to most usernames there is a colored dot that when hovered over expands and reveals some underlying text.
Using their CSS as a starting point, I can recreate this effect but my issue is that the underlying text I have does not collapse, so I never achieve a "dot" shape while the user is not hovering.
Here's my CSS:
* {
font: normal x-small verdana,arial,helvetica,sans-serif;
}
.flair {
min-width: 12px;
max-width: 12px;
height: 12px;
line-height: 12px;
border-radius: 12px;
border: none;
overflow: hidden;
padding: 0;
vertical-align: middle;
font-size: 10px !important;
-webkit-transition:all 0.3s;
transition: all 0.3s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
position: relative;
}
.flair:hover {
max-width: 500px;
padding: 0 5px;
color: #fff;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.flair-no-press {
background:#888;
color:#888;
}
And here's my HTML:
<span class="flair flair-no-press" title="non presser">non presser</span>
Here's a jsfiddle showing what this looks like. Once again my intended effect is simply making the dot collapse entirely when not being hovered over like they have.
What am I missing here?
I have the following CSS code:
.special {
height: 20px;
width: 125px;
border-bottom: 0px #69D2E7;
border-radius: 10px 10px 0px 0px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
letter-spacing:1px;
opacity: 0.5;
transition-property: opacity;
transition-duration: 500ms;
text-transform: uppercase;
right: 0px;
position: fixed;
bottom: 0px;
z-index: 6969;
}
.special:hover {
tranisition: opacity 500ms, border-bottom 500ms;
opacity: 1.5;
border-bottom: 200px #69D2E7;
}
I'm trying to make it so when hovered, it gets bigger (border-bottom height increases), and opacity changes. Opacity does, with the element I have, but the height doesn't increase. What am I doing wrong ?
http://jsfiddle.net/7U3xn/
Here's an example to see how it works.
You need to add a border-style. For instance, you can use solid:
UPDATED EXAMPLE HERE
.special:hover {
transition: opacity 500ms, border-bottom 500ms;
opacity: 1.5;
border-bottom: 200px solid #69D2E7;
}
Also, fix the typo as MarcB points out. It should be transition not tranisition.
tranisition: opacity 500ms, border-bottom 500ms;
^^---typo
Syntax errors in CSS blocks kill the rest of the css directives BELOW the error. If you'd bothered looking at your browser's developer console (e.g. shift-ctrl-J) in Firefox, you'd have seen the CSS error...