Hover image transition (fade) to a title - HTML - html

I am currently coding on brackets and notepad++ to create a very basic HTML Website. My question is how am I able to hover over an image (which is also a link to another page) in my nav bar (my nav bar consists of photos, not text) and have the image do fade transition into text. I cannot do CSS nor can I for this project. I need it to be able to integrate this code with my other coding I already have (so not create a new image in the process).

Related

How can i embed a css hover effect on an image in wordpress

im trying to embed an image with a css hover on my wordpress site. But cant seem to wrap my head around how to embed the code.
The last code on this page called "chico" is the one im trying to embed. https://github.com/codrops/HoverEffectIdeas/blob/master/css/set1.css
can someone explain to me how i can put this on my image.

Tumblr theme sidebar and infinite scroll?

I have a question regarding a simple tumblr theme I'm trying to make.
I've never really done a theme before and can't find specific information on what I'm trying to do.
I need to get the sidebar links to be links that you can hover over, and also be able to space the "About" from the main text without having to put white text beneath.
I also need to space the bottom of the posts with the bottom of the page more, because as you can see there's space at the top but not the bottom...
The last thing is that I need to get infinite scroll on my page so there's no need to change pages.
How do I get the sidebar and every post to be slightly bordered, the same color as the lines on the background?
I know that these are very simple questions, but I'm new to this and confused. Thanks so much!
The website name is jake-bellissimo.tumblr.com
And the code is:
http://pastebin.com/FeHSKSdu
Thanks so much!
I confess I've never made a tumblr theme, but it looks like it's some basic CSS that you need.
:hover pseudo selector and padding (box model)
Again, look at padding/margin (box model)
Infinite scroll implementation will require some custom javascript and server side code. Not sure if tumblr supports this.
Borders are also achieved with the css border property border
You'll probably need to read up on CSS before you try making a theme for tumblr. Again, I'd recommend the articles on Mozilla developer network

Once I've designed a navigation bar using CSS & HTML -- how can I put the HTML code in one place so it shows in each window? [duplicate]

This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 7 years ago.
Once I have the nav bar designed with HTML and CSS elements... if I put the HTML in its own file, can I link to it some way in the other pages so that the nav bar shows up?
The CSS is in its own file already of course.
The HTML includes a list with the nav bar topics, plus the banner across the top of the page and some images. We want that same banner and nav bar on every page. (It's for a small non-profit group.)
In all the sites explaining how to create a nav bar, I have yet to see mention of this idea. It's like subroutines (except no variables passed).
Thanks. The problem was solved with the Include statement!
If I get you right, you can do the following with PHP:
include("header.html");
Just change header.html to the location your header is saved and insert the code in every page.

Animate text using CSS for "slideshow"

I'm trying to create a slideshow of sorts for just text. The closest thing I can come across are flash animations or scrolling marquees, which I do not want. I want to turn the banner below (which is an animated gif) into a slideshow with text using CSS.
http://www.crystalimagesinc.com/banner_animation.gif
The following link is as close to what I want to do as I can find, though it's not very good (and kind of messes with other elements on the page).
http://cssdeck.com/labs/css-news-ticker
What is a clean, relatively simple way to create a banner or "slideshow" of text, preferably in CSS?

Storing Texts in a Single text when Browser is Resized in HTML/CSS

I am learning HTML and CSS by trying to replicate a website's features and as of now I am succeeding doing it. But when I re-sized the browser(I am using Chrome), I noticed that the texts are stored to another text. I am trying to replicate the features of www.bostonglobe.com
The Sections Bar that contains News, Metro, Arts.... Insiders are being stored in section when chrome is being restored or re-sized.
How will I do that using CSS/HTML5?
I am using ul and li tags for News, Metro, Arts.... Insiders inside a div.
Thanks.