I want to make the same design below
But I have a problem with the floating div which is the camera icon.
It should be clickable. I put z-index so it will be on top of the image that will change. I want to make all div to be clickable.
Hope you guys can help me.
Thanks!
here's my code
<article class="RegistrationInfo__Section media">
<div class="RegistrationInfo__Section--image media-left">
<div class="field">
<span class="file-bg">
<span
class="icon is-large"
v-if="formObject.image"
>
<img v-if src="~#/assets/images/camera.png">
</span>
<img v-else src="~#/assets/images/camera.png">
</span>
<div class="file is-boxed">
<label class="file-label">
<input
class="file-input"
type="file"
name="image"
ref="input"
#change="validateAndProcessImage"
>
<span class="file-cta">
<span class="file-icon">
<img
v-if="formObject.image"
:src="`/api/files/${formObject.image}`"
>
<img v-else src="~#/assets/images/profile_off.png">
</span>
</span>
</label>
</div>
<p v-if="formErrors.imageFiles" class="help is-danger">{{ formErrors.imageFiles[0] }}</p>
</div>
</div>
</article>
Here's my SCSS file.
.RegistrationInfo {
#at-root #{&}__Section {
#at-root #{&}--image {
margin-right: 2rem;
.field {
position: relative;
.file-bg {
position: absolute;
z-index: 1;
right: -10px;
width: 50px;
height: 50px;
.icon i {
cursor: pointer;
margin: auto;
}
}
.file {
&.is-boxed {
.file-icon {
height: 128px;
width: 128px;
margin-right: 0;
}
.file-cta {
padding: 0;
border-radius: 50%;
justify-content: center;
img {
height: 128px;
width: 128px;
border-radius: 50%;
object-fit: cover;
object-position: top;
}
}
}
}
.help {
max-width: 128px;
}
}
}
The problem seems to be with the z-index you did set.
By default, all page elements have a z-index of 1 unless otherwise specified. Provided that .file-bg is your camera icon, changing the z-index to 2 would make your div clickable.
Related
I'm implementing a slider where I like to display one slide at a time.
I've tried it using flexbox for the display container but unfortunately can't make it. How can I display only one slide at a time?
<div class="viewport">
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<div class="contentCard">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Marvell_Logo.svg" />
</div>
<button class="prev-next-btn prev"></button>
<button class="prev-next-btn next"></button>
</div>
*** CSS ***
.viewport {
display: flex;
}
img {
max-width: 100%
}
.prev-next-btn {
position: absolute;
width: 35px;
height: 35px;
background: green;
top: 35%;
}
.prev-next-btn.next {
right: 30px;
}
.prev-next-btn.prev {
left: 30px;
}
.contentCard {
width: 100%
}
Link to the code
Hi I'm trying to add a colored border to my 'dreams-anchor-wrap' div but can't seem to be able to use any CSS on it for some reason and I'm not sure why. Is it not possible to wrap a div around an anchor tag and then add CSS properties to it?
here's the link to my sandbox code:
https://codesandbox.io/s/unruffled-jones-0v0xj?file=/src/App.js
You just misspelled className on 'dreams-anchor-wrap' div.Correct your mistake and should work
You have to write your classes like "class" not className.
Then it will be run correctly.
* {
margin: 0;
border: 0;
padding: 0;
}
.dream-homes-container {
display: flex;
justify-content: center;
}
.dream-home-card {
margin: 0 auto;
padding: 15px;
width: 200px;
height: 100%;
}
.dream-homes-container :last-child {
padding-right: 0;
}
.dream-home-card img {
width: 100%;
height: 70%;
}
.property-info {
width: 100%;
color: black;
padding: 0 0 5px 10px;
}
.dream-home-card a {
text-decoration: none;
width: 100%;
}
.num-specs-margin {
margin-right: 10px;
}
.dream-anchor-wrap {
border:2px solid blue;
}
.dream-homes-wrap {
margin-bottom: 50px;
}
<div class="App">
<div class="dream-home-card">
<a href="#">
<div class="dream-anchor-wrap">
<img src="https://images.pexels.com/photos/2343466/pexels-photo-2343466.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<div class="property-info">
<h4>Pent Suite</h4>
<div class="property-specs">
<i class="fas fa-bed"></i>
<span class="num-beds num-specs-margin">4</span>
<i class="fas fa-shower "></i>
<span class="num-baths num-specs-margin">2</span>
<i class="fas fa-car"></i>
<span class="num-cars ">2</span>
</div>
</div>
</div>
</a>
</div>
</div>
I'm trying to wrap my head around making a breadcrumbs navigation that will look sort of like this.
I want the circle to be centered beneath the text. I want the text to stay within the container where I place the breadscrumbs. E.g. I can't use position absolute to place them relatively to the circle, since they would potentially overflow the container I put them in.
This is where I'm currently at... https://jsfiddle.net/04pts9ey/2/
body {
background: gray;
}
.container {
max-width: 80%;
margin: auto;
background: #f6f6f6;
padding: 40px;
}
.page {
width: 100%;
height: 400px;
border: 1px solid black;
margin-top: 24px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
margin-bottom: 8px;
}
.circle {
background: purple;
width: 18px;
height: 18px;
border-radius: 50%;
position: relative;
}
.step:not(:last-child) .circle:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
height: 1px;
width: 100px;
right: 100px;
background: green;
}
<div class="container">
<div class="wrapper">
<span class="step">
<span class="text">Short</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Long title here</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Medium title</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Another title</span>
<span class="circle"></span>
</span>
</div>
<div class="page"></div>
</div>
My main issue seems to be that I can't align the circle and text together, since putting them in a div together, makes it hard for me to draw the lines between the circles.
Something like this ?
.wrapper {
display: flex;
border: 1px solid;
}
.step {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.text {
margin-bottom: 8px;
}
.circle {
background: orange;
width: 20px;
height: 20px;
border-radius: 50%;
margin-top: auto;
}
.step:not(:last-child)>.circle:before {
content: "";
position: absolute;
height: 2px;
left: 0;
right: 0;
bottom: 10px;
transform: translate(50%, 50%);
background: orange;
}
/* Styles below are not needed, Used for illustration */
.wrapper {
resize: horizontal;
overflow: auto;
}
<h3>Bottom right corner to resize for responsiveness</h3>
<div class="wrapper">
<span class="step">
<span class="text">Short</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Long title here</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Medium title</span>
<span class="circle"></span>
</span>
<span class="step">
<span class="text">Another title</span>
<span class="circle"></span>
</span>
</div>
The code is self explanatory nevertheless if you have any question please leave a comment, The only significant changes i made are:
moved the lines from being relative to .circle to .step to have more control over the width.
margin-top:auto on the .circle to ensure it's always on be bottom in case text overflows.
Made .step equal width using flex: 1 1 0; So the lines between the circle have a unified offset.
Having some trouble getting the desired effect on an image overlay with responsive image. What I want is upon hovering over the image, the colour block and text to appear as shown, but for the text to be in the vertical centre of the div. I have tried vertical-middle but it doesn't seem to be working. Can't make the width and height set value as need to collapse and expand. If anyone can help i'd appreciate it. Thanks
Code, CSS below
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay p {
color: #ffffff;
text-align: center;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
img{
max-width: 100%;
height: auto;
}
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay:before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
border: 1px solid;
}
.overlay p {
color: #ffffff;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
You need to wrap the overlay with another div(since tables seem to ignore their height and width when they're absolute) and add position:absolute to it. Then add dislpay:table and dislpay:table-cell; vertical-align:middle for the child divs.
Check out this fiddle: https://jsfiddle.net/65cvzcev/
Disclaimer: I am a VB guy with 4 days of jQuery and CSS experience. I am just trying to figure out the web design world!
I want to learn how to approach a design like this:
!(http://i.imgur.com/tDlRxnh.jpg)
Figuring it out from the image, I believe there's an outer div with an image center aligned and a white border around the image
The image has a left and right button on either sides that overlaps the images (God knows how's that even possible!)
Below the Outer Div are four radio buttons aligned one after the other
How to go about this design? (interested in just the design, not the coding part)
Comments/explanations would help! Thanks.
Edit: With my 16 hrs of experience, this is what I have so far http://jsfiddle.net/29mH2/2/. Sorry for being such a n00b!
<div id="somediv">
<img src=""/>
<img src=""/>
<img src=""/>
</div>
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
div {
background-color:blue;
border: 2px white;
position: absolute;
}
img {
display: none;
position: absolute;
}
Since you mentioned you're working with jQuery already, take a look at this tutorial and a working example of the result.
Basically, you're going to want to make two list elements.
One will contain the slides, and the other will contain the navigation buttons.
EDIT:
Since you're just looking for an example of the design, Here's a basic example that shows how to make a layout like you're talking about without any actual functionality.
HTML:
<div class="slider">
<img class="image" src="http://i.imgur.com/dL3io.jpg" />
<div class="navigation-arrows">
<div class="arrow left"><</div>
<div class="arrow right">></div>
</div>
</div>
<div class="navigation">
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
</div>
CSS:
body {
text-align: center;
}
.slider,
.slider .image {
width: 400px;
}
.slider .image,
.navigation-arrows,
.navigation-arrows .arrow {
position: absolute;
}
.navigation-arrows,
.navigation-arrows .arrow {
height: 25px;
}
.slider {
height: 250px;
position: relative;
margin: 20px auto;
}
.slider .image {
height: 250px;
left: 0;
top: 0;
}
.navigation-arrows {
width: 100%;
margin: 0 auto;
top: 125px;
}
.navigation-arrows .arrow {
border-radius: 12.5px;
background: #000000;
color: #ffffff;
width: 25px;
line-height: 25px;
cursor: pointer;
}
.navigation-arrows .left {
left: 5px;
}
.navigation-arrows .right {
right: 5px;
}