Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've been trying to find a good, simple solution for this for days now, and I'm coming up empty handed.
I'm trying to make a blog in wordpress, that currently has excerpt with images on the front page. The images are not featured images and they link to the full post. What I really want is for "read more" to appear when i hover over the post image on the front page.
Ideally, I would love to implement one of these codrops hover effects (http://tympanus.net/Development/HoverEffectIdeas/) on the post images if it's possible. I'm very much a newbie to wordpress, so I don't know where to put what code.
But any help would be greatly appreciated.
Try below core code of HTML and CSS:
<style type="text/css">
div.texthover
{
display:block;
position:relative;
width:150px;
}
div.texthover .overlay
{
position:absolute;
top:45%;
width:100;
width:150px;
background-color:rgba(0, 0, 0, 0.3);
display:none;width:150px;
}
div.texthover:hover .overlay
{
display:block;
}
</style>
<div class="texthover"><br />
<img src="image.jpg" width="150" height="150" />
<div class="overlay"><br />
<span>This is some text I want to display</span>
</div>
</div>
In WordPress, go to Appearance -> Editor and edit style.css or your main .css theme file. You can put there your hover code. You also need to add the corresponding classes to your image. However if you want "read more" to appear you would need the existing associated HTML code. On another hand, you got some hover plugins available, I found this one with a quick search : https://wordpress.org/plugins/amazing-hover-effects/
Good luck.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
First-time poster, owner of a small business. I'm a novice who edits code to tweak the site. I'm not a developer. Please be gentle.
My site displays dates for news posts (good) and for my FAQs (not wanted).
The div class is the same for both, so when I hide the FAQ date, the news post date gets hidden as well.
I'm trying to figure out how to select more specifically. The "article" level contains the most specific tag that pertains specifically to the FAQ.
Can I select by article class and work my way down? I believe that should be possible, but if it is, I can't figure out the syntax. Below is NOT the syntax I've attempted; it's just to illustrate the hierarchy:
article class="faq"
header class="generic-header-name-thats-found-elsewhere-in-site"
div class="generic-div-name-also-found-elsewhere"
div class="generic-child-div-name"
ul class="generic-ul-class-name"
All I want to do is hide that unordered list class if it happens to occur with the "faq" article class. It would be cleaner if my news posts and faq posts used unique tags, but they don't, and dealing with that is well beyond me.
Apologies if I've transgressed any typical conventions for asking questions in this forum. Help with this will be much appreciated. Thanks!
just chain them together to get to the ul
article header div div ul{
background-color:red;
}
How to select a ul - within a div - within another div - within a header - within an article class
<article>
<header>
<div>
<div>
<ul>
<li>test</li>
</ul>
</div>
</div>
</header>
</article>
I think this should do it:
.faq ul {
//your css
}
I think you can try like this ".faq .generic-header-name-thats-found-elsewhere-in-site .generic-div-name-also-found-elsewhere .generic-child-div-name .generic-ul-class-name" .
and if it still doesn't work so I need a full code to debug.
I hope it helps 👍
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
Scenario: I have created a class name it pbox with its own border and background and shadow etc. to wrap product image and title . I use the exact same styles for last news to display last news image and title. When I review the website I decide to edit the background color for last news (not for products). When the project is big, I may forget that pbox is used also for products. How do you manage this situation?
1- Produce new class name for every different series of objects? Do you create 20 similar classes when you have 20 different type of content with image and title?
2- produce a new class name when I am editing an existing class and leave the old one unchanged? (even it is not used elsewhere; How do you make sure if this class is used elsewhere?) So do you have a lot of unused classes in your project?
Well you can handle the situation using its parent class like this
Here both product and news block has the same weighed block class pbox
By calling the parent of the news block .news you can edit the background of its child
.pbox{
width:50px;
height:50px;
background:green;
border-radius:7px;
}
.news .pbox{
background:red;
margin-left:15px;
}
div{float:left;}
<div class="products">
<div class="pbox">
</div>
</div>
<div class="news">
<div class="pbox">
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I wanted to add multiple src URL's for a single image using HTML. Is that even possible?
This can't be done with html alone, but you can use the global event handler onerror as an attribute in the following manner demonstrated in the linked JSFiddle and embedded code snippet below.
Note: concerning the demonstrations below, alter the filepaths to the specified images sources to observe the adjusted behaviour.
JSFiddle Demonstration
Code Snippet Demonstration:
<img src="https://placehold.it/500x500?text=img-1"
onError="this.onerror=null; /* to prevent infinite loops */
this.src='https://placehold.it/500x500?text=img-2'; /* default */
/* first condition */
if (this.src != 'https://placehold.it/500x500?text=img-2') {
this.src='https://placehold.it/500x500?text=img-3';
/* second condition */
if (this.src != 'https://placehold.it/500x500?text=img-3') {
this.src='https://placehold.it/500x500?text=img-4';
/* third condition */
if (this.src != 'https://placehold.it/500x500?text=img-4') {
this.src='https://placehold.it/500x500?text=img-5'
}
}
}
">
More on GlobalEventHandlers.onerror
With Css I dont think so,
But with Javascript ?
Yeah possible if you want user to get it open multiple links when clicked in that image,
//jquery
$('img').click(function(e) {
window.open('http://yoururl1.com');
window.open('http://yoururl2.com');
e.preventDefault();
});
you can try picture tag
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
[edit] initially I thought he did it with javascript, as it actually turns out, he chose a CSS only approach.
So I stumbled over this blog:
david walsh's blog about jquery css etc
I really like the horizontal menu. I want to build something similar. I would have loved to look at how he did it.
What is a good way to find out what is going on there?
This appears to be all CSS. In chrome, if you inspect element on one of the menu items, you'll see the basic structure as:
<nav>
<ul>
<li class=>
<a>Link</a><!-- this is the main menu item -->
<div> <!-- this is the submenu -->
<ul>
<li></li> <!-- submenu item -->
</div>
</li>
</ul>
</nav>
Now, knowing all of this, you can click the button to activate hover on various elements, so you know which is getting the new styles.
When I activate hover on the nav > ul > li the submenu becomes visible.
nav>ul>li:hover .dropdown {
display: block;
opacity: 1;
}
When activating hover on the nav>ul>li>a, the little image pops up.
nav>ul>li.connect>a:hover,
nav>ul>li.connect>a:active,
nav>ul>li.connect>a:focus {
background-position: -324px 46px;
}
That header looks like pure CSS to me, but in general, if you're using Firebug, I'm pretty sure you can stick a breakpoint on an event by looking through the /events/seq/1 section of the script panel.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Im looking to have images centred in a row on http://justinstephens.co under the 'contact us' section.
Probably a simple resolution but I can't seem to get it right.
Update
The solution below was done in Chrome with live editing. After further investigation, it appears your CSS file adds a margin to #contact-images. Removing this margin will allow the solution below to work.
#contact-images {
/*margin-left: 190px;*/
text-align: center;
}
This will center the <ul> under Contact us:
<div id="contact-images" style="text-align: center;">
There remains a slight misalignment. Remove the padding to the <ul> element to fix this.
<ul style="padding: 0 0 0 0;">
Add text-align:center to the element with the id contact-images. The following is only for demonstration purpose:
<div id="contact-images" style="text-align: center;"> [...] </div>