I have created the following website http://www.nabresco.com from an html based theme.
Im definitely no expert in coding bit i figured my way out in order to edit it to my needs.
The website is up and running now and is looking good.
There is only one problem left that i cannot seem to figure out.
The pictures in the galleries are acting as if they are black and white and become coloured only when the cursor is on the actual selected picture. This is happening on some coputers and on others im viewing it normally (weird?).
I want to change them to all be colored all the time without having this black and white effect.
The code on the html for these pictures is as follows (showing first pic in the gallery code):
<div class="preloader">
<a class="bwWrapper single-image plus-icon" href="images/projects/al-rawi/5.png" rel="folio">
<img src="images/projects/al-rawi/5.png" alt="" >
</a>
This shows the pictures whith a plus sign that you can click on.
The css code is as follows:
/* -------------------------------------------------- */
/* Images
/* -------------------------------------------------- */
.single-image {
position: relative;
display: block;
margin-bottom: 15px;
}
.bwWrapper {
position: relative;
overflow: hidden;
display: block;
im quite lost now as i dont know if there is something that i need to change from the CSS file or not.
Thank you,
Rashed
Try it with
.BWfade{
display:none!important;
}
Should work. (tested in Firefox)
Related
Im not quite sure how to adress this problem because its solely happening on the mobile chrome browser.
The Problem:
So as you can see on the image there are gaps around the divs where the background is shining trough. The setup of the code is the following:
<div className={classNames(
scss[timeline-item},
scss[inProgress]
)}
>
<img
className={scss.icons}
src={require(`../../../../assets/images/icons/${icon}.png`)}
alt={icon}
/>
</div>
class of the Div:
.timeline-item{
border: white;
flex: 1;
background: url(../../../../assets/images/iconBgSmall.png) repeat-y center;
display: flex;
justify-content: center;
align-items: center;
background-color: #b3b3b3;
>
(Note here when border is set to 0 then i get the same error in the desktop version of chrome, so i set it to white).
When a step is done an additional class gets rendered into the dom of div:
.done {
background-color: black;
}
.inProgress {
background-color: green;
}
Image as Background
to see the image click on it to open in new window (transparent/white)
So as you can see the idea is to use the background color to show the actual state of the timeline. The background image of the div is way bigger than the div itself so it cant be because of the image size.
Already tried:
content: ' ';
border: 0;
Removing box shadows (even tough it doesnt have one).
Negative margins
outline: 0
Removing all the background colors would work but then my functionality is gone.
HTML/CSS Snipped
This is basically the exact code i took and then let it be mapped with mockup data. As you can see here nothing is happening so i dont understand where this error can come from.
https://codepen.io/anon/pen/EeOZVN
Hope somebody can help!
Thanks in advance
I am trying to get two font-awesome icons to always display over a series of divs.
When the user hovers over the main details, I can get the details to be surrounded by a border with a different background. However, this does prevent the the icons from being displayed correctly.
I understand that this requires the use of the z-index, but all of my attempts to display the icons correctly have failed. I have searched SO & Google, but still cannot solve this simple issue.
This is what I am attempting to achieve:
This is what I currently have:
Here is my JSFiddle example.
I would really appreciate some assistance solving this issue.
Just some code to display the jsfiddle:
<div id="id_membership_details_resume_template" class="live_preview_wrapper noselect resumeStyleWrapper10" dir="ltr" style="direction: ltr;">
Remove this
#id_resume_detail_content {
position: relative;
}
Edit: and update this also for the X button ( just changed top and right according to jsfiddle provided template )
.resume_details_unselect {
position: absolute;
right: 15px;
top: 45px;
visibility: hidden;
}
My first question so please go easy. I've been stumped on this for a day now and can't work out what the issue is. Essentially I have a div with an ID that i'm adding a background url too..image1 inside the main div. Essentially it's an image that swaps when I hover. I've gone right back to basics and tried this code in a fresh document and it works perfectly. However when I paste the same code in the file i'm trying to work on the image doesn't display. No idea what would be stopping it?
The div id is working. I styled an empty red box to test it out.
The path is correct. I even went as far as to paste the image into my root for the sake of simplicity. Still nothing.
Any help would be appreciated.
html:
<div id="main">
<h1> <!-- something something about us --> </h1>
<p>The Custom House clock struck one. Mr. Fogg observed that his watch was two hours too fast.
Two hours! Admitting that he was at this moment taking an express train, he could reach London and the Reform Club by a quarter before nine, p.m. His forehead slightly wrinkled.</p>
<div id="image1"> </div> <!-- This is the part i'm having trouble with-->
CSS (including all css for #main):
#main h1 {
text-align: center;
padding: 30px 0 0 0;
color: #4b4b4c;
}
#main {height: 685px;}
#main p {
padding: 20px 50px 0 50px;
width: 60%;
margin: 0 auto;
text-align: center;
font-size: 15px;
color: #868686;
}
/* rollover css images */
#image1 {
background: url(contextmap.jpg) no-repeat;
width: 400px;
height: 400px;
}
I haven't added the hover yet because I can't even get the initial image to display, yet everything worked fine in my sample using only this code.
If there's anything i've left out please let me know. Like I said this is my first time posing a question. Thankyou.
You may need to change the file path in your css.
Instead of:
url(contextmap.jpg)
Try:
url(../images/contextmap.jpg)
Images can be replaced for the name of the folder where the jpg is stored.
The URLS in the css are relative to the CSS file, not the HTML file that links it. this should work if you have the image and the CSS in the same folder (or in case of CSS inside a style tag in your HTML file, same folder as your HTML file).
Hey I'm trying to add icons to my top navigation bar.
I have a plugin for social media icons, so I am trying to add the plugin shortcode to the nav menu. I downloaded a plugin to allow me to add shortcode to a menu.
Here is the shortcode I want to add: [feather_follow show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
I tried adding size="16" to make the images smaller but it made them disappear completely. Please visit my site to see the results I am getting. Containers and sizing are all screwed up, I have no idea how to begin fixing this.
Can anyone take a quick look and suggest anything? I would REALLY appreciate it. I have already wasted hours and hours on this simple problem. My site is greenenvysupply.com
Try adding this
[feather_follow size="64" show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
You should use percentages for making your icons smaller without losing the ratio of the icons. So you can write something like this in your main CSS:
.top-bar ul>li a {
width: auto!important;
height: auto!important;
}
.top-bar ul>li a img {
position: relative;
width: 30%!important;
height: 50%!important;
}
I'm creating my portfolio site on Bootstrap 4. I've implemented a sliding javascript caption (tweaked from a source online) to overlay the thumbnail images. That all works fine (except for the caption box extending too far out..), but when I started using that, the left edge of where my thumbnails start has moved to the right and I can't figure out what's causing the problem. I've been trying to figure it out for hours.. whatever's causing it is not caused by my custom CSS, because I tried removing it all and it was still weirdly aligned there.
Another thing that I'm trying to do is have the thumbnails tiled up right up against each other, but I can't figure out how to get rid of their margins/padding...
Here's a link to make it easier to check it out. Thanks so much in advance, it would really mean a lot to me if I could get this to work.
SO sorry for the messy code, I'm going to clean it up once I get this stuff working.
EDIT: I don't know why, or how.. but the alignment problem was caused by the UL class. I changed it to a div and now it works perfectly.
Look at your code. You have defined width twice. use width:97%;
#hover-img .caption-btm {
background: rgba(4, 186, 183, 0.6);
width: 70%; ********
height: 60px;
position: absolute;
bottom: 4px;
color: #fff;
display: none;
width: 100%; ********
}