What im trying to do is when I hover over a anchor tag link on the same page, it also needs to affect the corresponding link.
It might be possible in CSS but I think JQuery would handle this better.
Im new to jquery
Heres my code:
<script>
$('.js-tooltip').on('click', function () {
$(this).toggleClass('js-tooltip-active')
})
</script>
Heres my CSS:
.tooltip {
position: relative;
display: inline-block;
height: 18px;
width: 18px;
line-height: 26px;
padding: 0 0;
border-radius: 15px;
font-size: 12px;
font-weight: bold;
color: #FFF;
background: #b71a71;
box-shadow: none;
white-space: nowrap;
cursor: pointer;
}
.tooltip:hover {
background: #b1d12d;
}
.tooltip-wrapper {
pointer-events: none;
position: absolute;
width: 250px;
margin-left: -125px;
left: 50%;
bottom: 100%;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.js-tooltip-active .tooltip-wrapper,
.tooltip:hover .tooltip-wrapper,
.tooltip-wrapper:hover {
pointer-events: auto;
opacity: 1;
}
.tooltip-wrapper:after {
z-index: 11;
display: block;
position: absolute;
left: 50%;
margin-left: -7px;
content: " ";
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #333;
}
.tooltip-wrapper:before {
bottom: -9px;
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
content: " ";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(255,255,255,0.1);
}
.tooltip-text {
display: inline-block;
position: relative;
padding: 6px 9px;
z-index: 10;
white-space: normal;
font-size: 12px;
font-weight: normal;
line-height: 18px;
background: #333;
background: rgba(0,0,0,0.8);
color: #fff;
border-radius: 5px;
text-shadow: none;
cursor: default;
box-shadow: 0 1px rgba(255,255,255,0.1);
}
<div class="mapbox"><img src="#" style="z-index: 101; border: none" width="672" height="744" usemap="#Map"/>
<a class="tooltip js-tooltip manmap" href="#" style="top: -315px; left: 270px; border: none; "><span class="tooltip-wrapper" style="z-index: 103; border: none; "><span class="tooltip-text" style="z-index: 103; cursor: pointer; border: none;">View</span></span></a>
<a class="tooltip js-tooltip lonmap" href="#" style="top: -150px; left: 365px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">View</span></span></a>
</div>
What the code above does is when I hover over the hotspot a small title box appears that the user can click.
<div id="col3" class="right">
<h2>Select a location<img src="#" width="21" height="18" alt="icon" /></h2>
<div class="box">
<h3>Select</h3>
<ul id="locationList">
<li class="a">A</li>
<li>B</li>
</ul>
</div>
This is the <li> link list that I would like to connect to the map.
What I want is to try and replicate the effect of the circle hover but on the links, I don't want to show and hide the circle markers on the map I would just like them to appear when the corresponding link has been hovered over.
Also the Map markers change colour from purple to green am I able to replicate that effect hovering over the links in the sidebar.
So basically when I hover over the circle marker the title tag pops up with the link, that is what I would like the link to do as well so I can hover over link and it will do the same and hovering over the circle and vice-versa.
I don't know if this helps but this is where I got the code for the tooltip/hotspot Heres the link, then I changed the code for it to look circle.
Thanks.
Ok....it took a little doing because my Jquery skills are poor so I'm sure this could be refactored and simplified but here goes.
We have to add an individual attribute to each list item, I use a data-attribute which can then be used to select each individual map point which will have it's own ID
JSfiddle Demo
Revised HTML
<div id="col5" class="left">
<h1>Pick A Location</h1>
<div class="mapbox">
<a id="A" class="tooltip js-tooltip" href="#">
<span class="tooltip-wrapper">
<span class="tooltip-text">View 1</span>
</span>
</a>
<a id="B" class="tooltip js-tooltip" href="#">
<span class="tooltip-wrapper" >
<span class="tooltip-text">View 2</span>
</span>
</a>
</div>
</div>
<div class="box">
<h3>Select a location</h3>
<ul id="locationList">
<li><a data-item="A" href="#">View 1</a></li>
<li><a data-item="B" href="#">View 2</a></li>
</ul>
</div>
CSS
I just added an `.active' class for the list item links
#locationList a.active {
color:red;
}
EDIT- and for the tooltip something similar
.tooltip.current {
background: #b1d12d;
}
Jquery
I added these two functions
$('.tooltip').hover(function() {
$('a[data-item="'+this.id+'"]').toggleClass('active');
});
/* when a tooltip is hovered, find the anchor which has a data-item attribute that matches the ID of the hovered element and toggle the active class */
$('#locationList a').hover(function() {
$('#' + $(this).data('item')).toggleClass('js-tooltip-active');
$('#' + $(this).data('item')).toggleClass('current'); /* EDIT for hover */
});
/* when list item link is hovered, find the matching ID toggle the js-tooltip-active class */
This is what you need. it is no my code all the credit goes to the author of the link below. Check the link to see the live example.
#one:hover ~ #three,
#six:hover ~ #four,
#seven:hover ~ .box {
background-color: black;
color: white;
}
#four {
margin-left: -35px;
}
#six {
left: 80px;
position: relative;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}
http://jsfiddle.net/ThinkingStiff/a3y52/
Related
hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND
replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">
I have a problem creating a small dialogue box to show when I've clicked the picture. Now my popup content just shows below the picture. Below is my coding:
function showpopup() {
document.getElementById("popupwindow").classList.toggle("hidden");
}
<style>
.hidden {display:none}
</style>
<span class="profile"><img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" style="margin-top: 30px;" onclick="showpopup()"></img></span>
<div id="popupwindow" class="hidden">
<p style="color:black;">LMS short explanation</p>
</div>
Actually, I want the result like below the picture, the popup content can show in the small dialog box.
Hope someone can guide me on how to solve it. Thanks.
Refer this:
function showpopup() {
let tooltip = document.getElementById("tooltiptext");
let visible = tooltip.style.display;
if (visible == "none") {
document.getElementById("tooltiptext").style.display = "block";
} else {
document.getElementById("tooltiptext").style.display = "none";
}
}
img {
cursor: pointer;
margin-top: 30px;
}
.tooltip {
display: block;
background: black;
border-radius: 5px;
max-width: 300px;
width: 300px;
position: absolute;
padding: 12px 18px;
font-family: open-sans-regular, sans-serif;
font-size: 14px;
color: white;
line-height: 22px;
box-sizing: border-box;
z-index: 1000;
outline: none;
}
.tooltip.bottom .arrow {
top: 0;
left: 50%;
border-top: none;
border-bottom: 10px solid black;
}
.tooltip .arrow {
width: 0;
height: 0;
position: absolute;
left: 50%;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #43b02a;
margin-top: -10px;
margin-left: -10px;
}
<img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" onclick="showpopup()"></img>
<div id="tooltiptext" class="bottom tooltip" style="display: none;">
<div class="arrow">
</div>
LMS short explanation
</div>
You need to define the css for pop-ups.
position, top, left, z-index, background color, width, height and so on.
you can follow this link
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip.tooltiptext {
visibility: visible;
}
.hidden{
display: none;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip" onClick="showpopup()">Hover over me
<span id="popupwindow" class="tooltiptext">Tooltip text</span>
</div>
<script>
function showpopup() {
document.getElementById("popupwindow").classList.toggle("hidden");
}
</script>
</body>
</html>
function showpopup() {
let popup = document.getElementById("popupwindow");
let display = popup.style.display;
if (display == "none") {
popup.style.display = "inline-block";
} else {
popup.style.display = "none";
}
}
<style>
#popupwindow {
position: relative;
display: none;
width: 200px;
z-index: 99;
top: -90px;
left: -150px;
border: 3px solid red;
}
.profile {
display: inline-block;
border: 5px solid red;
}
</style>
<div>
<span class="profile"><img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" style="margin-top: 30px;" onclick="showpopup()"></img></span>
<div id="popupwindow" class="hidden">
<p style="color:black;">LMS short explanation</p>
</div>
</div>
I'm having trouble with the snippets editor so i can't post it properly.
but , here is the codepen regarding your code.
you must enclose all html in a div and the change the postion relative to it.
for the popup , you have to style it with borders,margin,background,etc.
If anyone can correct it then please make the snippet above working.
JavaScript
$(function(){
$('.select-another-button').each(function(){
$(this).bind('click', function(e) {
$(this).attr('disabled','true'); //disables the button
$('#overlay').show(); //after disabling show the overlay for hover
setTimeout(function(){
$(this).attr('disabled','false'); //enables after 5mins
$('#overlay').hide(); //hide the overlay
}, 300000);
e.preventDefault();
fileBrowser(this);
return false;
});
});
});
$("#overlay").hover(function(){
$('#message').show();
},function(){
$('#message').hide();
});
HTML
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button"
data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9"
data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button"
data-turbolinks="false" data-url="/documents/upload/9/"
data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1"
style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button"
data-url="/messaging/send/2/">
<i class="material-icons">assignment_late</i>
<div class="alert alert-success" id="send-message" style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
<i class="material-icons">settings</i>
</div>
<h5>Request documents</h5>
</div>
CSS
.title-actions {
float: right;
height: 50px;
margin-top: 13px;
}
.title-actions a {
transition: background 0.3s ease;
}
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions a:hover {
background: #4382B5;
}
.title-actions span {
color: #444;
background: #E6E6E6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px;
}
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions .btn-icon {
background: transparent;
position: relative;
color: #3E5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px;
}
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px;
}
.title-actions .btn-icon:hover {
color: #4382B5;
background: transparent;
}
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px;
}
In the html block, I added the
<div class="wrapper">
<div id="overlay"></div>
<a href="#"
title="{% trans "Send email - rejected file(s)" %}"
class="btn btn-icon select-another-button"
data-url="{% url "messaging:send" request_id=object.pk %}">
<i class="material-icons">assignment_late</i>
<div class='alert alert-success' id='send-message' style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
In fact, I didn't add everything. I just did add the first two div tags, and I got a little issue with the different button from this code. It changed the old line of to the new line of , but I don't even know how to fix it. How could I modify my code to bring back two the old line of buttons? I think I could style with css, but I can't say how because I don't have a lot of experience with it.
.wrapper is a block element, so it won't stay beside it's siblings. All of those siblings have .btn-icon which sets display: inline-block. You could either add .btn-icon to the .wrapper element so it will display inline-block (although then it will inherit the rest of the .btn-icon styles), or just set .wrapper to display: inline-block; (what I did)
.title-actions {
float: right;
height: 50px;
margin-top: 13px;
}
.title-actions a {
transition: background 0.3s ease;
}
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions a:hover {
background: #4382B5;
}
.title-actions span {
color: #444;
background: #E6E6E6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px;
}
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions .btn-icon {
background: transparent;
position: relative;
color: #3E5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px;
}
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px;
}
.title-actions .btn-icon:hover {
color: #4382B5;
background: transparent;
}
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px;
}
.wrapper {
display: inline-block;
}
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button" data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9" data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button" data-turbolinks="false" data-url="/documents/upload/9/" data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1" style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button" data-url="/messaging/send/2/">
<i class="material-icons">assignment_late</i>
<div class="alert alert-success" id="send-message" style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
<i class="material-icons">settings</i>
</div>
<h5>Request documents</h5>
</div>
This may be a slightly odd answer to your question. Assuming you wanted them into groups on the top rightith your 4 icons. (Given i dont have full entirely experience with the mobile-html platform) Here is a javascript you can use to eliminate odd issues:
//this var is short and clean coded to help diagnose some issues
//for this example, you can store values as an array
//these arrays with your content will be used to make cloned sections
//with different icons
var
icon = ["folder", "cloud", "case", "settings"],
imgbg = ["folder.jpg", "cloud.jpg", "case.jpg", "setting.jpg"],
frame = ""
;
for (i = 0; i < icon.length; i++) {
frame += "<div class='" +
icon[i] +
"'style='background-image:url(assets/" +
imgbg[i] +
");'></div>"
;
//which creates the code below as cloning
//"<div class="icon[i]" style="background-image:url(imgbg[i]);"></div>"
}
document.getElementById("demo").innerHTML = frame;
//this returns the clone code into a desired tml empty target like:
//<div id="demo"></div>
//then you can edit the css for float right as well as display top right
//to keep it at top right use this css
.display-top-right{
position:absolute;
top:0;
right:0;
float:right;
z-index:1;
}
i want the image to be overlay-ed with any color and give a tick mark on it(As it is selected) allowing only one image at a time. while clicking other image it should hide the previous one and show tick and overlay on new image.
<div class="grid-two imageandtext">
<figure>
<img src="assets/images/painting.jpg" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
<div class="imageandtext image_grid">
<img src="assets/images/photography.jpg" class="img-thumbnail" >
<div class="caption1">
<p>Photography</p>
</div></div>
</figure>
</div>
it should display like below image
now it is working like this
https://jsfiddle.net/liza_susan/L8jyum77/
Here is a start, using a pseudo element for the cover, a label and an input of type radio to take care of the selection.
I wrapped the image in a label, and when clicked, it simply checks the input.
In the CSS, when an input is checked, the .image_grid input:checked + .caption::after rule apply the properties to cover and show the check mark.
Updated fiddle
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption p {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg1">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="imageandtext image_grid">
<label for="selimg2">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
</label>
<input type="radio" name="selimg" id="selimg2">
<div class="caption">
<p>Photography</p>
</div>
</div>
</div>
Based on a comment, here is a version where the caption is positioned inside the label, as a span (as label can only have inline element as children).
With this one doesn't need unique id on the input and can drop the for attribute, and no need to compensate for any padding and/or margin set on the image_grid.
Updated fiddle
Stack snippet
.caption {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.caption span {
display: inline-block;
padding: 10px;
color: #fff;
background: rgba(0,0,0,0.5);
font-family: 'Myriad Pro regular';
font-size: 15.31px;
}
.image_grid {
display: inline-block;
padding-left: 25px;
}
.image_grid label {
position: relative;
display: inline-block;
}
.image_grid img {
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 70px; height: 70px;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
line-height: 80px;
text-align: center;
border: 2px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
<div class="imageandtext image_grid">
<label>
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<input type="radio" name="selimg">
<span class="caption">
<span>Painting</span>
</span>
</label>
</div>
</div>
How about adding an image when someone hovers over it.
i.e.
.image-thumbnail:hover {
background-image: <path to image>;
background-repeat: no-repeat;
}
How about this JQuery function:
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
$('.image_grid').click(function() {
$('.image_grid img:nth-of-type(2)').hide();
$(this).children('img:nth-of-type(2)').show();
});
.grid-two {
width: 50%;
display: inline;
}
.caption1 {
position: absolute;
top: -51px;
left: 11px;
width: 100%;
color: #000;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline;
padding-left: 5px;
}
.absolute {
border: 1px solid black;
position: absolute;
left: 0px;
display: none;
width: 50%;
margin: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="grid-two imageandtext">
<figure>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Painting</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
<div class="imageandtext image_grid">
<img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
<img src="https://i.stack.imgur.com/Kg1Do.png" class="absolute">
</div>
</figure>
</div>
JSFiddle
I have a header and I need a small menu box below it, I'm trying to make sure I won't need to use top in css, and I can just add a line break in HTML. I have the following code for the header, the global_tools_menu is the menu I'm trying to add. For some reason, it starts from the top of the page? How would I make it start from just below the header? Here's the codeHTML:
<div class="global_header">
<b><p>ex</p></b>
<header>
<ul class="nav-bar">
<li class="nav-item global_tools" onclick="tools()"><a><img src="/ex/assets/tools.png" width="20px"/></a></li>
<?php
if(isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`myaccount`);"><a>My Account</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`scripts/logout.php`);"><a>Logout</a></li>';
}
if(!isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`login`);"><a>Log in</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`signup`)";><a>Sign Up</a></li>';
}
?>
<li class="nav-item" onclick="redirect('');"><a>Home</a></li>
<li class="nav-item" onclick="redirect('all');"><a>All</a></li>
<li class="nav-item" onclick="redirect('search');"><a>Search</a></li>
</ul>
</header>
</div><br>
<div id="global_tools_menu">
<div id="global_tools_true">
</div>
<div id="global_tools_false">
</div>
</div>
CSS:
.tools {
background-image: url('assets/tools.png');
}
a {
color: #009AFF;
text-decoration: none;
}
body {
font-family: 'PT-Sans', sans-serif;
}
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #009AFF;
height: 30px;
border: 1px solid;
}
.nav-item {
display: block;
color: #fff;
text-align: center;
padding: 6px 8px;
width: calc(2px + 13%);
text-decoration: none;
float: left;
border-right: 1px solid #000;
cursor: pointer;
background-color: #0050FF;
}
.nav-item a {
color: white;
}
.nav-item:hover {
background-color: #0039B5;
}
.right-3826 {
float: right;
border-right: 0px solid;
border-left: 1px solid #000;
}
input:focus {
outline: none;
}
.global_header p {
position: relative;
font-size: 70px;
cursor: pointer;
text-align: center;
margin-bottom: 20px;
vertical-align: middle;
top: -20px;
color: white;
}
.global_header {
background-color: #009AFF;
word-wrap: break-word;
position: absolute;
top: 0px;
width: 100%;
left: 0;
}
.global_tools {
background-color: white;
}
.global_tools:hover {
background-color: #EAEAEA;
}
#global_tools_menu {
position: relative;
width: 400px;
height: 700px;
background-color: #080808;
Here is a JSFiddle for that. I need to make that black box start from below the header?
https://jsfiddle.net/qypm88dm/
I don't know if this is the answer you were looking for but I would do this,
add
<div class="blank"></div>
just below
<div class="global_header">
...
</div>
so it would be
<div class="global_header">
...
</div>
<div class="blank"></div>
and css would be
.blank {
height: 190px;
width: 100%;
}
https://jsfiddle.net/qypm88dm/2/
Set the position of global_tools_menu to inline instead of absolute or relative because those are in reference to the top left of the page, which is why it is up at the top. If you set it to inline it will pop down right below your header.
Edit: My mistake, that will set it behind it, but if you do that and then give it margin-top: 200px that will get it below it. But that may not be the exact fix you want.